在底层元素上调用slider方法可以生成滑动条组件
一.配置滑动条
滑动条组件的选项:
- animate:若设为true,用户点击滑块会跳动
- disable:禁用滑块
- max:滑动条最大值,默认100
- min:滑动条最小值,默认0
- orientation:滑动条方向
- range:和values选项一起生成具有多个滑块的滑动条
- step:定义从max到min的最小间距
- value:滑动条表示的值
- values:和range一起创建多个滑块的滑动条
/**orientation改变滑动方向*/
<html>
<head>
<title></title>
<script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
<script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<style type="text/css">
#hslider,#vslider{margin:10px}
</style>
<script type="text/javascript">
$(function(){
$("#hslider").slider({
value:35
});
$("#vslider").slider({
orientation:"vertical",
value:35
});
});
</script>
<body>
<div id="hslider"></div>
<div id="vslider"></div>
</body>
</html>
/**给滑动条增加动画效果*/
<script type="text/javascript">
$(function(){
$("#slider").slider({
animate:"fast"
});
});
</script>
<body>
<div id="slider"></div>
/**截图效果不明显,小伙伴们可自行演示*/
/**创建范围选择器*/
<script type="text/javascript">
$(function(){
$("#slider").slider({
value:[35,65],
range:true,
create:displaySliderValues,
slide:displaySliderValues
});
function displaySliderValues(){
$("#lower").text($("#slider").slider("values",0));
$("#upper").text($("#slider").slider("values",1));
}
});
</script>
<body>
<div id="slider"></div>
<div>Lower Value:<span id="lower"></span>
Upper Value:<span id="upper"></span></div>
</body>
/**为了得到范围选择器,需要把range选项设置位true,并把values选项设置为一个包含最低和最高边界的数组(创建普通滑块条使用value选项,而范围选择器使用values),在例子中create和slide事件绑定了处理函数,其中$("#lower").text($("#slider").slider("values",0));滑块的顺序号从0开始计算,即取得第一个滑块的值显示在div中*/
二.滑动条组件方法
- destory:让底层化快恢复原始状态
- disable:禁用滑块
- enable:启用滑块
- option:改变滑块条组件选项
- “value”,value:得到或者设置值
- “values”,[values]:得到或者设置范围选择器的值
/**滑动条控制实例*/
<html>
<head>
<title></title>
<script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
<script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<style type="text/css">
#slider,#rangeslider,*.inputDiv{margin:10px}
label{width:80px;display: :inline-block;margin:4px;}
</style>
<script type="text/javascript">
$(function(){
$("#slider").slider({
value:50,
create:function(){
$("#slideVal").val($("#slider").slider("value"));
}
});
$("#rangeslider").slider({
values:[35,65],
range:true,
create:function(){
$("#rangeMin").val($("#rangeslider").slider("values",0));
$("#rangeMax").val($("#rangeslider").slider("values",1));
}
});
$("input").change(function(e){
switch (this.id){
case "rangeMin":
case "rangeMax":
var index = (this.id == "rangeMax")?1:0;
$("#rangeslider").slider("values",index,$(this).val())
break;
case "slideVal":
$("#slider").slider("value",$(this).val())
break;
}
});
});
</script>
<body>
<div id="rangeslider"></div>
<div class="inputDiv">
<label for="rangeMin">Range Min:</label><input id="rangeMin" />
<label for="rangeMax">Range Max:</label><input id="rangeMax" />
</div>
<div id="slider">
</div>
<div class="inputDiv">
<label for="slideVal">Slide Val:</label><input id="slideVal" />
</div>
</body>
</html>
当input数字变化时,处理函数就会自动执行
三.滑动条组件事件
- create:当滑动条创建完成时触发
- start:用户开始滑动滑块时触发
- slide:滑动滑块过程中,鼠标每一次移动都会触发
- change:当用户停止滑块或者使用脚本改变滑动条组件值时触发
- stop:用户停止滑块时触发