jQueryUI

当前位置:首页>jQuery>jQueryUI>JqueryUI实践系列Slider

JqueryUI实践系列Slider

时间:2015-07-14 17:01来源:网络整理 作者:KKWL 点击:
Slider采用滑动的效果来显示我们的选择,可用在纯数字的选择上,看看效果: 在上图中有两个滑动块供我们选择; 先加入必要的js: link type=text/css href=base/ui.all.css / script type=text/javas

Slider采用滑动的效果来显示我们的选择,可用在纯数字的选择上,看看效果:

在上图中有两个滑动块供我们选择;
先加入必要的js:
<link type="text/css" href="base/ui.all.css" />
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.slider.js"></script>
页面中设置两个div;
 <p>
<label for="age" >Age range:</label>
<input type="text" />
</p>

<div></div>
最后初始化我们的slider;
 $(function(){
    $("#slider").slider(
    {
    animate: true ,
    max:80,
    min:18,
    range:true,
    orientation: 'auto',
    slide:function(event, ui) {
                $("#age").val( ui.values[0]+"::"+ui.values[1] );
     }
    });
  });
看看常用的属性:
animate:boolean 代表在点击滑动条时滑动块的移动是否有动画效果;
max,min:取值的最大和最小范围;
range:是否显示范围区间,如果为false,则显示如下效果:

orientation:水平还是垂直显示 'horizontal' 或 'vertical'.
slide:滑动块移动的事件,如果是一个滑动则
$("#age").val( ui.value );
 

------分隔线----------------------------