Slider Widget
Categories: Widgets
version added: 1.5
Description: 拖动手柄以选择一个数值。
QuickNavExamples
Options
Methods
Events
jQuery UI Slider 插件使所选择的元素成为一个滑块(slider). 可以多种选项,例如多个操作手柄和操作范围。 手柄可以被鼠标拖动或者随着方向键移动。
slider小工具将在初始化的时候根据 ui-slider-handle
样式名创建手柄元素。您可以在初始化前通过创建和追加的方式,或者在元素上添加ui-slider-handle
样式来自定义手柄元素。 这只会创建需要匹配value
/values
的手柄数值个数。例如,如果您指定的值: [ 1, 5, 18 ]
,并创建一个自定义手柄,该插件将创建另外两个。
主题(Theming)
slider小工具使用jQuery UI CSS framework样式的外观和感觉。如果滑块具体样式是必须的,你可以用下面的CSS类名:
ui-slider
: 滑块控件的轨道。该元素将追加一个ui-slider-horizontal
或ui-slider-vertical
样式名,这取决于slider小工具是横向还是纵向的。另外具有UI的滑块水平或UI滑块垂直取决于orientation
参数,表示滑块的取向的类名。ui-slider-handle
: 滑块手柄.ui-slider-range
: 当设置 选项时使用的已选范围。如果range
选项设置为"min"
或者"max"
,则该元素会分别另外带有一个ui-slider-range-min
或ui-slider-range-max
类。
依赖
- UI 核心(UI Core)
- 部件库(Widget Factory)
- 鼠标交互(Mouse Interaction)
其他注意事项:
- 该部件要求一些功能性的 CSS,否则将无法工作。如果您创建了一个自定义的主题,请使用小部件指定的 CSS 文件作为起点。
选项
animate类型: Boolean or String or Number
默认值: false
当用户单击滑块轨道时是否平稳地滑动手柄。 也可以接受任何有效的动画持续时间。多种类型支持:
- Boolean: 当设置为
true
时, 滑动手柄将以默认的持续时间执行动画。 - String: 速度的名称, 比如
"fast"
或"slow"
。 - Number: 动画持续时间, 以毫秒为单位。
代码示例:
使用指定animate
选项初始化滑块:
$( ".selector" ).slider({ animate: "fast" });
初始化后,获取或者设置animate
选项:
// getter
var animate = $( ".selector" ).slider( "option", "animate" );
// setter
$( ".selector" ).slider( "option", "animate", "fast" );
disabledType: Boolean
Default: false
如果设置为true
,则禁用滑块。Code examples:
使用disabled
选项初始化滑块组件:
$( ".selector" ).slider({ disabled: true });
在组件初始化之后,读取或设置 disabled
选项:
// getter
var disabled = $( ".selector" ).slider( "option", "disabled" );
// setter
$( ".selector" ).slider( "option", "disabled", true );
maxType: Number
Default: 100
滑块的最大值。Code examples:
使用max
选项初始化滑块组件:
$( ".selector" ).slider({ max: 50 });
在组件初始化之后,读取或设置 max
选项:
// getter
var max = $( ".selector" ).slider( "option", "max" );
// setter
$( ".selector" ).slider( "option", "max", 50 );
minType: Number
Default: 0
滑块的最小值Code examples:
使用min
选项初始化滑块组件:
$( ".selector" ).slider({ min: 10 });
在组件初始化之后,读取或设置 min
选项:
// getter
var min = $( ".selector" ).slider( "option", "min" );
// setter
$( ".selector" ).slider( "option", "min", 10 );
orientationType: String
Default: "horizontal"
确定滑块手柄 将 水平(最小在左,最大在右)或垂直(最小在底部,最大在顶部)移动。(愚人码头注:就是滑块的方向,横向或纵向)可能的值:"horizontal"
(横向), "vertical"
(纵向)。Code examples:
使用orientation
选项初始化滑块组件:
$( ".selector" ).slider({ orientation: "vertical" });
在组件初始化之后,读取或设置 orientation
选项:
// getter
var orientation = $( ".selector" ).slider( "option", "orientation" );
// setter
$( ".selector" ).slider( "option", "orientation", "vertical" );
rangeType: Boolean or String
Default: false
滑块是否表现为一个范围。多种类型支持:
- Boolean: 如果设置为
true
,如果你有两个手柄,slider将会感应到他们之间各种可能的范围要素。 - String: 或者他们是
"min"
或者"max"
值。最小的范围将从slider的最小值传递给操作柄。最大的范围将从slider的最大值传递给操作柄
Code examples:
使用range
选项初始化滑块组件:
$( ".selector" ).slider({ range: true });
在组件初始化之后,读取或设置 range
选项:
// getter
var range = $( ".selector" ).slider( "option", "range" );
// setter
$( ".selector" ).slider( "option", "range", true );
stepType: Number
Default: 1
定义slider从最小值移动到最大值的单位步长。在这个指定范围(最小值到最大值)内的值需要能被范围整除。Code examples:
使用step
选项初始化滑块组件:
$( ".selector" ).slider({ step: 5 });
在组件初始化之后,读取或设置 step
选项:
// getter
var step = $( ".selector" ).slider( "option", "step" );
// setter
$( ".selector" ).slider( "option", "step", 5 );
valueType: Number
Default: 0
如果只有一个手柄则是指定slider的value值。 如果有多余一个的操作柄, 则是定义第一个操作柄的value值。Code examples:
使用value
选项初始化滑块组件:
$( ".selector" ).slider({ value: 10 });
在组件初始化之后,读取或设置 value
选项:
// getter
var value = $( ".selector" ).slider( "option", "value" );
// setter
$( ".selector" ).slider( "option", "value", 10 );
valuesType: Array
Default: null
这个选项可以用来为多个操作柄设定value值. 如果 range
设置为 true
, 'values' 的长度最少应为 2。Code examples:
使用values
选项初始化滑块组件:
$( ".selector" ).slider({ values: [ 10, 25 ] });
在组件初始化之后,读取或设置 values
选项:
// getter
var values = $( ".selector" ).slider( "option", "values" );
// setter
$( ".selector" ).slider( "option", "values", [ 10, 25 ] );
Methods
destroy()Returns: jQuery (plugin only)
完全销毁滑块组件的功能,这将使元素返回它的初始状态。
- 这个方法不接收任何参数
Code examples:
调用destroy 方法:
$( ".selector" ).slider( "destroy" );
disable()Returns: jQuery (plugin only)
禁用滑块组件。
- 这个方法不接收任何参数
Code examples:
调用disable 方法:
$( ".selector" ).slider( "disable" );
enable()Returns: jQuery (plugin only)
启用滑块组件。
- 这个方法不接收任何参数
Code examples:
调用enable 方法:
$( ".selector" ).slider( "enable" );
option( optionName )Returns: Object
获取与optionName
对应的选项值。
- optionNameType: String要获取的值所对应的选项的名称。
Code examples:
调用这个方法:
var isDisabled = $( ".selector" ).slider( "option", "disabled" );
option()Returns: PlainObject
获取一个包含有描述当前滑块组件选项哈希值的键/值对。
- 这个方法不接收任何参数
Code examples:
调用这个方法:
var options = $( ".selector" ).slider( "option" );
option( optionName, value )Returns: jQuery (plugin only)
设置滑块组件optionName
参数指定的选项的值。
Code examples:
调用这个方法:
$( ".selector" ).slider( "option", "disabled", true );
option( options )Returns: jQuery (plugin only)
设置一个或多个滑块组件的选项值。
- optionsType: Object要设置的选项名与值之间的映射关系。
Code examples:
调用这个方法:
$( ".selector" ).slider( "option", { disabled: true } );
value()Returns: Number
获取滑块组件的值。
- 这个方法不接收任何参数
Code examples:
调用这个方法:
var selection = $( ".selector" ).slider( "value" );
value( value )Returns: jQuery (plugin only)
设置滑块组件的值。
- valueType: Number用来设置的值
Code examples:
调用这个方法:
$( ".selector" ).slider( "value", 55 );
values()Returns: Array
获取所有手柄的值.(愚人码头注:适用于多手柄的滑块)
- 这个方法不接收任何参数
Code examples:
调用这个方法:
var values = $( ".selector" ).slider( "values" );
values( index )Returns: Number
获取指定手柄的值。(愚人码头注:适用于多手柄的滑块)
- indexType: Integer从0开始计数的手柄索引值。
Code examples:
调用这个方法:
var value = $( ".selector" ).slider( "values", 0 );
values( index, value )Returns: jQuery (plugin only)
设置指定手柄的值。(愚人码头注:适用于多手柄的滑块)
Code examples:
调用这个方法:
$( ".selector" ).slider( "values", 0, 55 );
values( values )Returns: jQuery (plugin only)
设置所有手柄的值。(愚人码头注:适用于多手柄的滑块)
- valuesType: Array要设置的值。
Code examples:
调用这个方法:
$( ".selector" ).slider( "values", [ 55, 105 ] );
widget()Returns: jQuery
返回一个滑块元素的jQuery
对象。
- 这个方法不接收任何参数
Code examples:
调用widget 方法:
var widget = $( ".selector" ).slider( "widget" );
Events
change( event, ui )Type: slidechange
当用户滑动一个手柄后,如果滑块的值改变了,就会触发这个事件;或者通过value
方法改变手柄值。
Code examples:
使用change 回调函数指定事件:
$( ".selector" ).slider({
change: function( event, ui ) {}
});
绑定事件侦听器到slidechange事件:
$( ".selector" ).on( "slidechange", function( event, ui ) {} );
create( event, ui )Type: slidecreate
当滑块组件被创建时触发。
注意: ui
对象是空的,但是为了与其它元素保持一直,它总是被包含。
Code examples:
使用create 回调函数指定事件:
$( ".selector" ).slider({
create: function( event, ui ) {}
});
绑定一个事件监听器到 slidecreate 事件:
$( ".selector" ).on( "slidecreate", function( event, ui ) {} );
slide( event, ui )Type: slide
这个事件鼠标滑动滑块时触发。ui.value
作为提供给事件的价值,表示将作为该当前移动手柄的结果值。 取消该事件会阻止手柄移动和手柄将继续其先前的值。取消该事件会阻止手柄移动并且手柄将继续其先前的值。
Code examples:
使用slide 回调函数指定事件:
$( ".selector" ).slider({
slide: function( event, ui ) {}
});
绑定一个事件监听器到 slide 事件:
$( ".selector" ).on( "slide", function( event, ui ) {} );
start( event, ui )Type: slidestart
当用户开始滑动滑块时触发。
Code examples:
使用start 回调函数指定事件:
$( ".selector" ).slider({
start: function( event, ui ) {}
});
绑定一个事件监听器到 slidestart 事件:
$( ".selector" ).on( "slidestart", function( event, ui ) {} );
stop( event, ui )Type: slidestop
当用户滑动滑块后触发。
Code examples:
使用stop 回调函数指定事件:
$( ".selector" ).slider({
stop: function( event, ui ) {}
});
绑定一个事件监听器到 slidestop 事件:
$( ".selector" ).on( "slidestop", function( event, ui ) {} );
Example:
一个简单的 jQuery UI 滑块(Slider)。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>#slider { margin: 10px; } </style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="slider"></div>
<script>
$( "#slider" ).slider();
</script>
</body>
</html>