UI/API/1.7/Slider

jQuery UI Slider

概述

jQuery UI Slider 插件使所选择的元素成为一个滑杆(slider). 可以多种选项,例如多个操作柄和操作范围. 手柄可以被鼠标拖动或者随着方向键移动.

所有的回调函数接受两个参数: 浏览器事件和ui对象, 此对象请查看下面的文档 :

  • ui.handle: jQuery - 获得当前操作焦点的操作柄
  • ui.value: Integer - 当前操作柄的值

其他附加文件

  • UI Core

示例

一个简单的 jQuery UI Slider.

$("#slider").slider();


<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.slider.js"></script>
  <style type="text/css">
    #slider { margin: 10px; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="slider"></div>

</body>
</html>

参数

  • animate

    类型:
    Boolean
    默认值:
    false

    当用户从slider外部在slider进行点击操作时是否启用动画滑动.

    代码示例

    使用指定的animate参数初始化一个slider. 
    $('.selector').slider({ animate: true });
    在初始化后设置或者获取animate参数. 
    //获取
var animate = $('.selector').slider('option', 'animate');
//设置
$('.selector').slider('option', 'animate', true);

  • max

    类型:
    Number
    默认值:
    100

    slider value的最大值.

    代码示例

    使用指定的max参数初始化一个slider. 
    $('.selector').slider({ max: 7 });
    在初始化后设置或者获取max参数. 
    //获取
var max = $('.selector').slider('option', 'max');
//设置
$('.selector').slider('option', 'max', 7);

  • min

    类型:
    Number
    默认值:
    0

    slider value的最小值.

    代码示例

    使用指定的min参数初始化一个slider. 
    $('.selector').slider({ min: -7 });
    在初始化后设置或者获取min参数. 
    //获取
var min = $('.selector').slider('option', 'min');
//设置
$('.selector').slider('option', 'min', -7);

  • orientation

    类型:
    String
    默认值:
    'auto'

    通常你不需要设置此选项因为插件将会自动嗅探slider的滑动方向. 如果方向没有被正确的设置,你可以将它设置为 'horizontal' 或者 'vertical'.

    代码示例

    使用指定的orientation参数初始化一个slider. 
    $('.selector').slider({ orientation: 'vertical' });
    在初始化后设置或者获取orientation参数. 
    //获取
var orientation = $('.selector').slider('option', 'orientation');
//设置
$('.selector').slider('option', 'orientation', 'vertical');

  • range

    类型:
    Boolean, String
    默认值:
    false

    如果设置为true, 如果你有两个操作柄slider将会感应到他们之间各种可能的范围要素. 或者他们是最小或者最大值. 最小的范围将从slider的最小值传递到操作柄.最大的范围将从slider的最大值传递到操作柄.

    代码示例

    使用指定的range参数初始化一个slider. 
    $('.selector').slider({ range: 'min' });
    在初始化后设置或者获取range参数. 
    //获取
var range = $('.selector').slider('option', 'range');
//设置
$('.selector').slider('option', 'range', 'min');

  • step

    类型:
    Number
    默认值:
    1

    定义slider从最小值移动到最大值的单位步长. 在这个指定范围(最小值到最大值)内的值需要能被范围整除.

    代码示例

    使用指定的step参数初始化一个slider. 
    $('.selector').slider({ step: 5 });
    在初始化后设置或者获取step参数. 
    //获取
var step = $('.selector').slider('option', 'step');
//设置
$('.selector').slider('option', 'step', 5);

  • value

    类型:
    Number
    默认值:
    0

    如果只有一个操作柄则是指定slider的value值. 如果有多余一个的操作柄, 则是定义第一个操作柄的value值.

    代码示例

    使用指定的value参数初始化一个slider. 
    $('.selector').slider({ value: 37 });
    在初始化后设置或者获取value参数. 
    //获取
var value = $('.selector').slider('option', 'value');
//设置
$('.selector').slider('option', 'value', 37);

  • values

    类型:
    Array
    默认值:
    null

    这个选项可以用来为多个操作柄设定value值. 如果 range 设置为 true, 'values' 的长度最少应为 2.

    代码示例

    使用指定的values参数初始化一个slider. 
    $('.selector').slider({ values: [1,5,9] });
    在初始化后设置或者获取values参数. 
    //获取
var values = $('.selector').slider('option', 'values');
//设置
$('.selector').slider('option', 'values', [1,5,9]);

事件

  • start

    类型:
    slidestart

    这个事件在用户开始滑动滑杆之前触发.

    代码示例

    提供一个回调函数对start事件进行操作. 
    $('.selector').slider({
   start: function(event, ui) { ... }
});
    使用slidestart类型来绑定start事件. 
    $('.selector').bind('slidestart', function(event, ui) {
  ...
});

  • slide

    类型:
    slide

    这个事件鼠标滑动滑杆时触发. 带有两个参数 e 和 ui, 分别代表事件和用户界面. 使用 ui.value (单滑杆 sliders) 获得当前操作柄的value值, $(..).slider('value', index) 获得另一个滑杆的value值.

    代码示例

    提供一个回调函数对slide事件进行操作. 
    $('.selector').slider({
   slide: function(event, ui) { ... }
});
    使用slide类型来绑定slide事件. 
    $('.selector').bind('slide', function(event, ui) {
  ...
});

  • change

    类型:
    slidechange

    这个事件在滑动停止并且slider的位置发生改变时触发.带有两个参数 e 和 ui, 分别代表事件和用户界面. 使用 ui.value (单滑杆 sliders) 获得当前操作柄的value值, $(..).slider('value', index) 获得另一个滑杆的value值.

    代码示例

    提供一个回调函数对change事件进行操作. 
    $('.selector').slider({
   change: function(event, ui) { ... }
});
    使用slidechange类型来绑定change事件. 
    $('.selector').bind('slidechange', function(event, ui) {
  ...
});

  • stop

    类型:
    slidestop

    这个事件在滑动停止时触发.

    代码示例

    提供一个回调函数对stop事件进行操作. 
    $('.selector').slider({
   stop: function(event, ui) { ... }
});
    使用slidestop类型来绑定stop事件. 
    $('.selector').bind('slidestop', function(event, ui) {
  ...
});

方法

  • destroy

    方法签名:
    .slider( 'destroy' )

    完全移除slider功能. 这将使元素返回到之前的初始化状态.

  • disable

    方法签名:
    .slider( 'disable' )

    禁用 slider.

  • enable

    方法签名:
    .slider( 'enable' )

    开启 slider.

  • option

    方法签名:
    .slider( 'option', optionName, [value] )

    获取或者设置slider参数. 如果没有提供参数值则是获取.

  • value

    方法签名:
    .slider( 'value', [value] )

    获取或者设置slider的value值. 适用于单滑杆slider.

  • values

    方法签名:
    .slider( 'values', index, [value] )

    获取或者设置slider的value值. 适用于多滑杆slider.

主题

jQuery UI Slider插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.

如果有更深层次的个性化需要，有特定类别的工具ui.slider.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。

jQuery UI CSS Framework classes示例

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
   <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
</div>

Note: 注：这是一个示例slider插件所产生的标记,而不是你应该使用的标记.创建一个slider唯一需要的标记是 <div><div>.