简要教程
这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件。该slider插件可以自定义slider的颜色、形状、透明度和tooltip等属性,美化的效果非常好。
安装
可以使用npm和bower来安装该slider插件。
npm install bootstrap-slider bower install seiyria-bootstrap-slider |
使用方法
首先要在页面中引入必要的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 |
基于Bootstrap的炫酷jQuery slider插件的更多相关文章
-
基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
-
【转】基于Bootstrap的超酷jQuery开关按钮插件
基于Bootstrap的超酷jQuery开关按钮插件
-
基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 *分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
-
百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
-
程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
-
基于Bootstrap的DropDownList的JQuery组件的完善版
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
-
制作炫酷banner js插件,revolution
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果.. ...
-
Vue + Bootstrap 制作炫酷个人简历(一)
最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在 开始! 首先 配置 ...
-
Vue + Bootstrap 制作炫酷个人简历(二)
没想到隔了这么久才来更新. 用vue做简历,不是非常适合,为什么呢. 因为简历没什么数据上的操作,一般都是静态的内容. 不过都说了用Vue来做,也只能强行续命了. 这里是我做好的成品 非一般简历 由 ...
随机推荐
-
Xamarin.Android广播接收器与绑定服务
一.前言 学习了前面的活动与服务后,你会发现服务对于活动而言似乎就是透明的,相反活动对于服务也是透明的,所以我们还需要一中机制能够将服务和活动之间架起一座桥梁,通过本节的学习,你将会学到广播与绑定服务 ...
-
DDD:整理了一些关于验证方面的文章
http://msdn.microsoft.com/en-us/library/ff664356(v=pandp.50).aspx http://gorodinski.com/blog/2012/05 ...
-
自定义key解决zabbix端口监听取值不准确的问题
今天有一个朋友问到我一个关于zabbix监控tcp端口的问题,明明端口在监听,但是通过net.tcp,listen取值取到的却是0. 经过简单的goole发现这已经是一个历史悠久的问题: 问 ...
-
Gitlab,Github与Bitbucket
这段时间开始做毕设,决定使用git来管理代码和相关的文档. 同时希望有一个远程托管,决定在github.bitbucket,以及我自己搭建的gitlab服务器中间选一个,最终决定使用bitbuckt. ...
-
Python Learing(一):Basic Grammar
装了python2.7,去图书馆借了python入门经典,暂且简单写下学习笔记,以供自己回忆 学习笔记(一)主要是基础语法部分: 1.python中数字以及字符串的使用; 2.输入与输出语句; 3.逻 ...
-
Java基本语法-----java常量
1常量的概述 常量是指在程序运行过程中其值不能改变的量. 2常量类型 Java中常量的分类: 整数常量 : 所有整数 小数常量 : 所有小数 布尔常量 : 只有true和false 字符常量 :使用' ...
-
MySQL自定义函数与存储过程
1.前置条件 MySQL数据库中存在表user_info,其结构和数据如下: mysql> desc user_info; +-----------+----------+------+---- ...
-
LVS负载均衡集群
回顾-Nginx反向代理型负载 负载均衡(load balance)集群,提供了一种廉价.有效.透明的方法,来扩展网络设备和服务器的负载.带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用 ...
-
夜谈Java类的定义
女孩:谈Java了,好耶? 男孩:夜谈一下,Java的类的定义~ 女孩:那谈Java的类的什么呢? 男孩:类的定义,对象的定义,类中的方法,构造方法,this关键字,方法的重载,Java中的类的访问权 ...
-
javascript知识体系
JAVASCRIPT 篇 0.基础语法 javascript基础语法包括:变量定义.数据类型.循环.选择.内置对象等. 数据类型有string,number,boolean,null,undefine ...