这是一款在原生 bootstrap slider 的基础上制作效果非常炫酷的 jQuery slider 插件。该 slider 插件可以自定义 slider 的颜色、形状、透明度和 tooltip 等属性,美化的效果非常好。
首先要在页面中引入必要的 css 和 js 文件。
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-slider.css" rel="stylesheet">
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/bootstrap-slider.js"></script>
记住要在引入完上边的文件后才可以开始调用该 bootstrap slider 插件。
注意:这个 bootstrap slider 插件可以不依赖于 jQuery,使用纯 js 的方式也可以操作它。浏览器兼容,该 bootstrap slider 插件只支持现代浏览器,低于 IE9 的浏览器都不支持。
作为 jQuery 插件版本的 bootstrap-slider。插件一个 input 元素,然后在它上面调用.slider()方法。
// Instantiate a slider
var mySlider = $("input.slider").slider();
// Call a method on the slider
var value = mySlider.slider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.slider('setValue', 5)
.slider('setValue', 7);
如果已经有一个 jQuery 插件的 slider()绑定在该命名空间中,那么 bootstrap slider 插件会一个候补的调用方法 bootstrapSlider。
// Instantiate a slider
var mySlider = $("input.slider").bootstrapSlider();
// Call a method on the slider
var value = mySlider.bootstrapSlider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.bootstrapSlider('setValue', 5)
.bootstrapSlider('setValue', 7);
使用原生 js 调用 bootstrap slider,在 DOM 中创建一个 input 元素,然后通过选择器为该 input 元素创建 slider 实例。
// Instantiate a slider
var mySlider = new Slider("input.slider", {
// initial options object
});
// Call a method on the slider
var value = mySlider.getValue();
// For non-getter methods, you can chain together commands
mySlider
.setValue(5)
.setValue(7);
以下这些参数也可以通过一个 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 |
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!