基于Bootstrap的炫酷jQuery slider插件

时间:2021-11-21 21:57:47
简要教程

这是一款在原生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
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Form/201502041324.html

基于Bootstrap的炫酷jQuery slider插件的更多相关文章

  1. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  2. 【转】基于Bootstrap的超酷jQuery开关按钮插件

    基于Bootstrap的超酷jQuery开关按钮插件

  3. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 *分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  4. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  5. 程序猿必备的10款超炫酷HTML5 Canvas插件

    1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

  6. 基于Bootstrap的DropDownList的JQuery组件的完善版

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...

  7. 制作炫酷banner js插件&comma;revolution

    这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果.. ...

  8. Vue &plus; Bootstrap 制作炫酷个人简历(一)

    最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在 开始! 首先 配置 ...

  9. Vue &plus; Bootstrap 制作炫酷个人简历(二)

    没想到隔了这么久才来更新. 用vue做简历,不是非常适合,为什么呢. 因为简历没什么数据上的操作,一般都是静态的内容. 不过都说了用Vue来做,也只能强行续命了. 这里是我做好的成品  非一般简历 由 ...

随机推荐

  1. Xamarin&period;Android广播接收器与绑定服务

    一.前言 学习了前面的活动与服务后,你会发现服务对于活动而言似乎就是透明的,相反活动对于服务也是透明的,所以我们还需要一中机制能够将服务和活动之间架起一座桥梁,通过本节的学习,你将会学到广播与绑定服务 ...

  2. DDD:整理了一些关于验证方面的文章

    http://msdn.microsoft.com/en-us/library/ff664356(v=pandp.50).aspx http://gorodinski.com/blog/2012/05 ...

  3. 自定义key解决zabbix端口监听取值不准确的问题

         今天有一个朋友问到我一个关于zabbix监控tcp端口的问题,明明端口在监听,但是通过net.tcp,listen取值取到的却是0. 经过简单的goole发现这已经是一个历史悠久的问题: 问 ...

  4. Gitlab,Github与Bitbucket

    这段时间开始做毕设,决定使用git来管理代码和相关的文档. 同时希望有一个远程托管,决定在github.bitbucket,以及我自己搭建的gitlab服务器中间选一个,最终决定使用bitbuckt. ...

  5. Python Learing(一):Basic Grammar

    装了python2.7,去图书馆借了python入门经典,暂且简单写下学习笔记,以供自己回忆 学习笔记(一)主要是基础语法部分: 1.python中数字以及字符串的使用; 2.输入与输出语句; 3.逻 ...

  6. Java基本语法-----java常量

    1常量的概述 常量是指在程序运行过程中其值不能改变的量. 2常量类型 Java中常量的分类: 整数常量 : 所有整数 小数常量 : 所有小数 布尔常量 : 只有true和false 字符常量 :使用' ...

  7. MySQL自定义函数与存储过程

    1.前置条件 MySQL数据库中存在表user_info,其结构和数据如下: mysql> desc user_info; +-----------+----------+------+---- ...

  8. LVS负载均衡集群

    回顾-Nginx反向代理型负载 负载均衡(load balance)集群,提供了一种廉价.有效.透明的方法,来扩展网络设备和服务器的负载.带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用 ...

  9. 夜谈Java类的定义

    女孩:谈Java了,好耶? 男孩:夜谈一下,Java的类的定义~ 女孩:那谈Java的类的什么呢? 男孩:类的定义,对象的定义,类中的方法,构造方法,this关键字,方法的重载,Java中的类的访问权 ...

  10. javascript知识体系

    JAVASCRIPT 篇 0.基础语法 javascript基础语法包括:变量定义.数据类型.循环.选择.内置对象等. 数据类型有string,number,boolean,null,undefine ...