jQuery UI增强功能的Slider滑块插件

当前位置:主页 > jQuery库 > 表单 > jQuery UI增强功能的Slider滑块插件
jQuery UI增强功能的Slider滑块插件
分享:

    插件介绍

    这是一款基于jQuery UI并在它的基础上增强了许多功能的Slider滑块插件。该插件在原来jQuery UI的滑块基础上进行了样式美化,各种label都可以自定义,并且提供了很多slider滑块移动时的动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:02-13
    阅读:
简要教程

这是一款基于jQuery UI并在它的基础上增强了许多功能的Slider滑块插件。该插件在原来jQuery UI的滑块基础上进行了样式美化,各种label都可以自定义,并且提供了很多slider滑块移动时的动画效果。

注意:

该slider滑块插件在于jqueryui 1.11.2配合使用时会有一点不兼容的情况。具体表现为当步长值不能够整除最大值的时候,那么滑块上的点和标签将会分布不均匀。

增强型jQuery ui滑块-1

增强型jQuery ui滑块-1

安装

如果你使用Bower,你可以通过命令行快速的安装该滑块插件。

bower install jquery-ui-slider-pips --save                    
                

另外你可以下载文件到本地使用。

插件需求
  • jQuery (1.9+)
  • jQuery UI (1.10+)

使用方法

在页面中引入jQuery和jQuery UI文件,然后引入jquery-ui-slider-pips.cssjquery-ui-slider-pips.js文件。CSS文件可以根据你的需求自行修改。

<!-- plus a jQuery UI theme, here I use "flick" -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css"> 

<!-- include the jQuery and jQuery UI scripts -->
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui-slider-pips.js"></script>                
                

如果你不需要其他的jQuery ui部件,强烈建议你只下载只包含slider滑块的jQuery自定义文件

Pips
<div class="slider"></div>                    
                
// to create the slider on the page we use jQuery to select the element
// from the HTML and apply the .slider() method, then we apply the pips afterwards.
                    
$(".slider").slider().slider("pips");                    
                
Float
<div class="slider"></div>                    
                
// we still select the jQuery element from the HTML like before, 
// but now we supply the float method instead of pips.
                    
$(".slider").slider().slider("float");                  
                
链式编程

该slider滑块的所有方法都是可以链式编程的:

// if you just want the defaults, copy & paste this code.
$('.element').slider().slider('pips').slider('float');                    
                
高级使用和选项:
// First of all attach a slider to an element. If you want to customize the range of values, you do it in the initialization.
$('.element').slider({min: 20, max: 65});

// Then you can give it pips and labels!  
$('.element').slider('pips', {  
    first: 'label',  
    last: 'label',  
    rest: 'pip',  
    labels: ['label1', 'label2', ...],  
    prefix: "",  
    suffix: ""  
});

// And finally can add floaty numbers (if desired)  
$('.element').slider('float', {  
    handle: true,  
    pips: true,  
    labels: ['label1', 'label2', ...],  
    prefix: "",  
    suffix: ""  
});                    
                

配置参数

可以通过设置参数来控制该jQuery ui滑块插件如何pips或floats。

$(".slider")
    .slider()
    .slider("pips", {
        /* options go here as an object */
    })
    .slider("float", {
        /* options go here as an object */
    })                    
                
Pips

以下是pips的所有可用参数:

参数选项 参数值 默认值 描述
first "label", "pip" or false "label"

决定在slider滑块上的第一个pip的样式

last "label", "pip" or false "label"

决定在slider滑块上的最后一个pip的样式

rest "label", "pip" or false "pip"

决定在slider滑块上其它pip的样式

step number 1 / 5%

step参数仅仅会在没nth个pip上生成。例如:如果我们设置step:2,那么获取的值只会是:0 ,2,4,6,8...

The step parameter will only

之一:如果slider滑块的值超过100,滑块的step将会被设置为这个值的5%。

labels array or object or false false

使用数组中给定的值覆盖pips的值。

例如:[ "Monday", "Tuesday", "Wednesday", ... ]
or { "first": "Monday", "last": "Sunday" }

prefix string ""

在pip 标签之前添加一个字符串。
例如: prefix: $ => $1, $2, $3, $4, ...

suffix string ""

在pip 标签之后添加一个字符串。
例如: suffix: °c => 1°c, 2°c, 3°c, 4°c, ...

Float

以下是Float的所有可用参数:

参数选项 参数值 默认值 描述
handle boolean true

设置是否在slider手柄上使用float效果。

pips boolean false

设置是否在pips上使用float效果。

labels array or object or false false

使用数组给定的值覆盖floats。
例如: ["Monday", "Tuesday", "Wednesday", ... ]
or { "first": "Monday", "last": "Sunday" }

prefix string ""

在浮动label之前添加一个字符串。
例如: prefix: $ => $1, $2, $3, $4, ...

suffix string ""

在浮动label之前添加一个字符串。
例如: suffix: °c => 1°c, 2°c, 3°c, 4°c, ...

自定义滑块样式

该jQuery ui slider滑块插件可以高度自定义滑块的CSS样式。将滑块设置为与你的项目样式统一的样式是非常重要的,你可以通过修改很伤的CSS代码,就可以获得令你满意的结果。

// here is a list of the presentation classes used in a heirarchical tree.

.ui-slider.ui-slider-pips  {}
.ui-slider-float {}
    .ui-slider-handle {}
        .ui-slider-tip {}
    .ui-slider-pip {}
    .ui-slider-pip-first {}
    .ui-slider-pip-last {}
    .ui-slider-pip-nth {}
    .ui-slider-pip-label {}
    .ui-slider-pip-hide {}
        .ui-slider-line {}
        .ui-slider-label {}
        .ui-slider-tip-label {}
    .ui-slider-pip-selected-initial {}
    .ui-slider-pip-selected {}                    
                

为了使代码尽可能简洁和高效,该slider滑块插件使用了最小的javascript配置,主要是应用在pips的显示、定位和格式化方面。还有用于切换各种元素的class。