【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

默认slider的安装启用
为slider自定义风格
修改配置选项
创建一个垂直的slider
设置最大最小值，和默认值
启用多个手柄和范围
slider内置的回调事件
slider的方法

这个简单的控件，由两个主要的元素组成，手柄，也称拇指。背景，也称为轨道。

1 安装启用一个slider

});

该控件需要以下库文件的支持：

jquery-ui-x.x.x.custom.css
jquery-x.x.x.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.slider.js

也需要主题图片的支持。

可以用鼠标或者上下左右键对齐操作。

2 自定义样式

推荐使用 ThemeRoller 方法定制主题。但是为了完全地改变控件的样貌和感觉，我们可以简单地创建我们自己的主题文件。

$(function(){ $("#mySlider").slider(); }); .background { height:50px; width:217px; padding:36px 0 0 24px; background:url(img/slider_outerbg.gif) no-repeat; } #mySlider { width:184px; height:23px; border:none; position:relative; left:4px; top:4px; background:url(img/slider_bg.gif) no-repeat; } #mySlider .ui-slider-handle { width:14px; height:30px; top:-4px; background:url(img/slider_handle.gif) no-repeat; } </style>

3 配置选项

垂直slider，多handles和步长都能够给在slider初始化的时候，给控件方法传递对象来配置。

Option	Default value	Used to…
animate	false	当track被点击时，为handle启用平滑动画
disabled	false	当控件初始化时禁用它
max	100	设置slider的最大值
min	0	设置slider的最小值
orientation	auto	设置slider thumb移动的轴。接受字符串值vertical或horizontal
range	false	创建一个能设置样式的range元素
step	1	设置步长，最大值必须能被这个数整除
value	0	设置初始化时的值
values	null	接受一个值数组。每个提供的整数会成为一个handle的值

3.1 创建垂直slider

};

如果没有设置高度，则track默认100 xp 。

3.2 最大最小值

默认地，最小值是0，最大值是100.

};

因为value的默认值是0，所以初始化后，handle在中间的位置。

3.3 步长

};

3.4 slider动画

slider控件内置的动画，能够在track被点击时，使handle平滑地移动到新位置。动画效果默认被禁用。

};

如果步长超过1，并且启用的动画效果，则thumb会滑动到离track被点击的最近步长位置。

3.5 设置slider的value

}

3.6 使用多个handles

};

3.7 范围

};

当有着多个handle时，我们能设置range选项为true，这回在两个handles之间添加一个范围样式元素。

当只有一个单一handle时，我们可以设置这个handle到 max 或 min 的范围。

};

此时为handle到最小值之间的范围。

4 使用事件API

Event	Fired when…
change	handle停止移动，并且value发生改变
slide	handle移动
start	开始移动时
stop	停止移动时

#mySlider{margin:60px auto 0;} #tip{ position:absolute;display:inline;padding:5px 0; width:50px;text-align:center;font:bold 11px Verdana; }

在start回调函数中，我们选择到tip元素，如果它存在。并且使用jQuery fadeOut()方法将其淡出。一旦从view中hidden，它就会从页面中被移除。

change回调函数会在每次slider handle 的value发生变化时执行。当函数被调用，我们创建一个tool tip并且将其附加到slider。它会显示在slider handle 的正上方，并且得到一些框架classnames。

我们从回调函数会传递ui对象，它包含一些有用的信息，value就是从它获得。事件按一下顺序会被触发：

start
slide
stop
change

当我们同时使用stop 和 change回调，change回调会覆盖stop回调。

对所有的组件而言，都可以使用jQuery bind()方法，如sliderstart。

5 slider的方法

当控件被初始化后，我们可以以代码的方式控制它。

Method	Used to…
value	给一个单一的slider handle设置一个新值。它会将handle自动移动到track上新的位置。这个方法接受一个单一的整数参数
values	当启用多个handles时，设置指定的handle移动到新的值。这个方法接受两个参数，index和新值

所有组件都有的 destroy ,disable ,enable, option widget 都适用。

value 和 values 方法可以set 和 get 一个单一或多个handles的 value。当然，我们也可以使用option 方法。

});

注意，当前jquery版本中，不能通过链式的使用两个方法，修改不同的个体。因为这个方法返回一个新值，并且不是一个jQuery 独享。

6 实际的使用

HTML 5 的<audio>元素，会自动地添加用户播放，暂停，调整音量的控制。

});

7 颜色slider

#container { width:426px; height:146px; padding:20px 20px 0; position:relative; font-size:11px; background:#eee; } #container label { float:left; text-align:right; margin:0 30px 26px 0; clear:left; } .ui-slider { width:240px; float:left;} .ui-slider-handle { width:15px; height:27px;} #colorBox { width:104px; height:94px; float:right; margin:-83px 0 0 0; background:#fff; } #container #outputLabel { float:right; margin:-14px 34px 0 0; } #output { width:100px; text-align:center; float:right; clear:both; margin-top:-17px; } });