滑块: 基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js

一、插件介绍
这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件。该slider插件可以自定义slider的颜色、形状、透明度和tooltip等属性，美化的效果非常好

二、简单Demo

1.1 使用CDN服务

[html]  view plain  copy

 print ?

1. <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    
2. <link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">  
3.   
4. <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>   
5. <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    
6. <script src="//cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>  

1.2本地引用

[html]  view plain  copy

 print ?

1. <link href="../Js/Bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet" />  
2. <link href="../Js/Slider/bootstrap-slider.min.css" rel="stylesheet" />  
3. <script src="../Js/jquery-1.11.3.min.js"></script>  
4. <script src="../Js/Bootstrap-3.3.6/js/bootstrap.min.js"></script>  
5. <script src="../Js/Slider/bootstrap-slider.js"></script>  

2.HTML，css定义

[html]  view plain  copy

 print ?

1. <style>  
2.     #ex1Slider .slider-selection {  
3.         background: #BABABA;  
4.     }  
5. </style>  
6. <input  id="ex1" data-slider-id="ex1Slider" type="text"  
7.        data-slider-min="0" data-slider-max="20" data-slider-step="1"  
8.        data-slider-value="15"/>  

3.js

[javascript]  view plain  copy

 print ?

1. // With JQuery 使用JQuery 方式调用  
2. $('#ex1').slider({  
3.     formatter: function (value) {  
4.         return 'Current value: ' + value;  
5.     }  
6. }).on('slide', function (slideEvt) {  
7.     //当滚动时触发  
8.     //console.info(slideEvt);  
9.     //获取当前滚动的值，可能有重复  
10.     // console.info(slideEvt.value);  
11. }).on('change', function (e) {  
12.     //当值发生改变的时候触发  
13.     //console.info(e);  
14.     //获取旧值和新值  
15.     console.info(e.value.oldValue + '--' + e.value.newValue);  
16. });  

slide事件

change事件

三、更多API

浏览器兼容

该bootstrap slider插件只支持现代浏览器，低于IE9的浏览器都不支持。

 配置参数

以下这些参数也可以通过一个data属性（data-slider-foo）或作为slider对象的一部分来调用。

参数名称	参数类型	默认值	描述
id	string	' '	设置slider元素的id
min	float	0	slider允许的最小值
max	float	10	slider允许的最大值
step	float	1	slider的步长
precision	float	小数的位数	slider数值的精度。
orientation	string	'horizontal'	设置slider的初始值，设置为数组表示一个范围。的方向。可选值：'vertical' 或 'horizontal'
value	float,array	5	slider的初始值，设置为数组表示一个范围。
range	bool	false	是否设置一个范围slider。如果初始化值为一个数组，该选项可选。如果初始化值为scalar，最大值将使用第二个值。
selection	string	'before'	选择配置。接收：'before', 'after' 或 'none'。在范围slider中，selection 被放置在两个手柄中间。
tooltip	string	'show'	在拖动手柄时是否显示tooltip，隐藏tooltip，或者总是显示tooltip。可选值：'show', 'hide' 或 'always'
tooltip_split	bool	false	如果是flase显示一个tooltip，如果设置为true，显示两个tooltip，每个手柄显示一个。
handle	string	'round'	手柄的形状。可选值： 'round', 'square', 'triangle' 或 'custom'
reversed	bool	false	slider是否反向
enabled	bool	true	slider是否可用
formatter	function	返回文本值	回调函数。返回想在tooltip中显示的文字。
natural_arrow_keys	bool	false	是否允许使用键盘的方向键来控制slider。默认情况下，right/up键是slider数值增大，left/down键使slider数值减少。

 方法

方法	参数	描述
getValue	---	获取slider的当前值
setValue	newValue, triggerSlideEvent	为slider设置一个新值。如果可选的triggerSlideEvent参数为true，'slide'事件将被触发。
destroy	---	移除和销毁slider实例
disable	---	使slider不可用，用户不能修改slider的值
enable	---	使slider可用
toggle	---	在slider可用与不可用之间切换
isEnabled	---	如果slider可用返回true，否则返回false
setAttribute	attribute, value	更新slider的属性
getAttribute	attribute	获取slider的属性
refresh	---	刷新当前的slider
on	eventType, callback	当slider的eventType事件被触发，回调函数将被调用
relayout	---	在初始化之后重新渲染tooltip。这在slider和tooltip在初始化时是隐藏的时候非常有用

 事件

事件	描述	返回值
slide	当slider被拖动时触发	新的slider值
slideStart	当slider开始拖动时触发	新的slider值
slideStop	当slider停止拖动或slider被点击时触发	新的slider值
change	slider的值改变时触发	带有两个属性的对象："oldValue"和"newValue"
slideEnabled	当设置slider为可用时触发	N/A
slideDisabled	当设置slider为不可用时触发	N/A

API来源地址： http://www.htmleaf.com/jQuery/Form/201502041324.html

更多Demo地址：http://www.htmleaf.com/Demo/201502041325.html