易网时代-编程资源站
Welcome
微信登录
编程资源
图片资源库
蚂蚁家优选
PDF转换器
软件资源
软件开发
、
小程序制作
、
系统集成与运维
、
空间租用
、
硬件开发
、
视频监控
、
技术咨询与支持
——联系电话:0311-88999002/88999003
首页
/
操作系统
/
Linux
/
jQuery插件滑动器的使用
jQuery插件滑动器的使用
<%@ page language=
"java"
import=
"java.util.*"
pageEncoding=
"utf-8"
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+
"://"
+request.getServerName()+
":"
+request.getServerPort()+path+
"/"
;
%>
<!DOCTYPE HTML
PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
>
<html>
<head>
<base href=
"<%=basePath%>"
>
<title>My JSP
"slider.jsp"
starting page</title>
<meta http-equiv=
"pragma"
content=
"no-cache"
>
<meta http-equiv=
"cache-control"
content=
"no-cache"
>
<meta http-equiv=
"expires"
content=
"0"
>
<meta http-equiv=
"keywords"
content=
"keyword1,keyword2,keyword3"
>
<meta http-equiv=
"description"
content=
"This is my page"
>
<!
--
<link rel=
"stylesheet"
type=
"text/css"
href=
"styles.css"
>
-->
<script type=
"text/javascript"
src=
"${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"
>
</script>
<script type=
"text/javascript"
src=
"${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"
>
</script>
<link rel=
"stylesheet"
type=
"text/css"
href=
"${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css"
>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
// Slider 滑动器的效果
$(
"#slider"
).slider( {
range :
true
, //
false
则分为两个滑块,如果为
false
,则没有连着 表示可分的 ,默认为
true
表示是否是一个整体
values
: [ 17, 67 ],//两个滑块的长度
step:10,//每次增长的步 长
value:20,//为初始化值 ,为0居中,为默认的
disable:
false
,//是否可用 默认是
false
,可用的
animate:
true
, //点击滑块后面的任意位置,看滑块的效果
max
:100,//滑动效果的最大值和最小值
min
:-10,//打开的时候位置变了,初始值为0,如果-7是最小值,在左边+7的位置上,如果是居中的位置 最大值和最小值的绝对值相等
orientation:
"horizontal"
,//水平或垂直 如果是水平(horizontal) ,垂直为 vertical
change:
function
(event,ui){
//alert($(
"#slider"
).slider(
"option"
,
"value"
));
alert(ui.value);
}
});
/*$(
"#slider"
).bind(
"slidechange"
,
function
(event,ui){
alert(ui.value);
});*/
});
</script>
</head>
<body>
<h2>
滑动器的操作
</h2>
<h2 class=
"demoHeaders"
>
Slider
</h2>
<div id=
"slider"
></div>
</body>
</html>
收藏该网址
版权所有©石家庄振强科技有限公司2024
冀ICP备08103738号-5
网站地图