slider - 基于Bootstrap炫酷jQuery插件

PetitQ 按钮图标 2018-11-10 2.15K 0 0

这是一款在原生 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()方法。

var mySlider = $("input.slider").slider();

var value = mySlider.slider('getValue');

// For non-getter methods, you can chain together commands

如果已经有一个 jQuery 插件的 slider()绑定在该命名空间中，那么 bootstrap slider 插件会一个候补的调用方法 bootstrapSlider。

var mySlider = $("input.slider").bootstrapSlider();

var value = mySlider.bootstrapSlider('getValue');

// For non-getter methods, you can chain together commands

        .bootstrapSlider('setValue', 7);

使用原生 js 调用 bootstrap slider,在 DOM 中创建一个 input 元素，然后通过选择器为该 input 元素创建 slider 实例。

var mySlider = new Slider("input.slider", {

// For non-getter methods, you can chain together commands

以下这些参数也可以通过一个 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