欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

jquery jqueryui jquery ui 滑动滑块文档 Slider Widget 文档 有大用

星期五, 2018-11-30 06:51 — adminshiping1

Slider Widget

Categories: Widgets

Slider Widgetversion 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 类。

依赖

其他注意事项:

  • 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。

选项

animate类型: Boolean or String or Number

默认值: false
当用户单击滑块轨道时是否平稳地滑动手柄。 也可以接受任何有效的动画持续时间。
多种类型支持：

  • Boolean: 当设置为 true时, 滑动手柄将以默认的持续时间执行动画。

  • String: 速度的名称, 比如 "fast" 或 "slow"。

  • Number: 动画持续时间, 以毫秒为单位。

代码示例:

使用指定animate选项初始化滑块：

1
$( ".selector" ).slider({ animate: "fast" });

初始化后，获取或者设置animate选项:

1
2
3
4
5
// getter
var animate = $( ".selector" ).slider( "option", "animate" );
 
// setter
$( ".selector" ).slider( "option", "animate", "fast" );

disabledType: Boolean

Default: false
如果设置为true，则禁用滑块。
Code examples:

使用disabled选项初始化滑块组件：

1
$( ".selector" ).slider({ disabled: true });

在组件初始化之后，读取或设置 disabled 选项：

1
2
3
4
5
// getter
var disabled = $( ".selector" ).slider( "option", "disabled" );
 
// setter
$( ".selector" ).slider( "option", "disabled", true );

maxType: Number

Default: 100
滑块的最大值。
Code examples:

使用max选项初始化滑块组件：

1
$( ".selector" ).slider({ max: 50 });

在组件初始化之后，读取或设置 max 选项：

1
2
3
4
5
// getter
var max = $( ".selector" ).slider( "option", "max" );
 
// setter
$( ".selector" ).slider( "option", "max", 50 );

minType: Number

Default: 0
滑块的最小值
Code examples:

使用min选项初始化滑块组件：

1
$( ".selector" ).slider({ min: 10 });

在组件初始化之后，读取或设置 min 选项：

1
2
3
4
5
// getter
var min = $( ".selector" ).slider( "option", "min" );
 
// setter
$( ".selector" ).slider( "option", "min", 10 );

orientationType: String

Default: "horizontal"
确定滑块手柄 将 水平（最小在左，最大在右）或垂直（最小在底部，最大在顶部）移动。（愚人码头注：就是滑块的方向，横向或纵向）可能的值："horizontal"（横向）, "vertical"（纵向）。
Code examples:

使用orientation选项初始化滑块组件：

1
$( ".selector" ).slider({ orientation: "vertical" });

在组件初始化之后，读取或设置 orientation 选项：

1
2
3
4
5
// 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选项初始化滑块组件：

1
$( ".selector" ).slider({ range: true });

在组件初始化之后，读取或设置 range 选项：

1
2
3
4
5
// getter
var range = $( ".selector" ).slider( "option", "range" );
 
// setter
$( ".selector" ).slider( "option", "range", true );

stepType: Number

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

使用step选项初始化滑块组件：

1
$( ".selector" ).slider({ step: 5 });

在组件初始化之后，读取或设置 step 选项：

1
2
3
4
5
// getter
var step = $( ".selector" ).slider( "option", "step" );
 
// setter
$( ".selector" ).slider( "option", "step", 5 );

valueType: Number

Default: 0
如果只有一个手柄则是指定slider的value值。 如果有多余一个的操作柄, 则是定义第一个操作柄的value值。
Code examples:

使用value选项初始化滑块组件：

1
$( ".selector" ).slider({ value: 10 });

在组件初始化之后，读取或设置 value 选项：

1
2
3
4
5
// 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选项初始化滑块组件：

1
$( ".selector" ).slider({ values: [ 10, 25 ] });

在组件初始化之后，读取或设置 values 选项：

1
2
3
4
5
// getter
var values = $( ".selector" ).slider( "option", "values" );
 
// setter
$( ".selector" ).slider( "option", "values", [ 10, 25 ] );

Methods

destroy()Returns: jQuery (plugin only)

完全销毁滑块组件的功能，这将使元素返回它的初始状态。
  • 这个方法不接收任何参数
Code examples:

调用destroy 方法：

1
$( ".selector" ).slider( "destroy" );

disable()Returns: jQuery (plugin only)

禁用滑块组件。
  • 这个方法不接收任何参数
Code examples:

调用disable 方法：

1
$( ".selector" ).slider( "disable" );

enable()Returns: jQuery (plugin only)

启用滑块组件。
  • 这个方法不接收任何参数
Code examples:

调用enable 方法：

1
$( ".selector" ).slider( "enable" );

option( optionName )Returns: Object

获取与optionName对应的选项值。
  • optionName
    Type: String
    要获取的值所对应的选项的名称。
Code examples:

调用这个方法：

1
var isDisabled = $( ".selector" ).slider( "option", "disabled" );

option()Returns: PlainObject

获取一个包含有描述当前滑块组件选项哈希值的键/值对。
  • 这个方法不接收任何参数
Code examples:

调用这个方法：

1
var options = $( ".selector" ).slider( "option" );

option( optionName, value )Returns: jQuery (plugin only)

设置滑块组件optionName参数指定的选项的值。
  • optionName
    Type: String
    要设置的选项的名称。
  • value
    Type: Object
    要为选项设置的参数值。
Code examples:

调用这个方法：

1
$( ".selector" ).slider( "option", "disabled", true );

option( options )Returns: jQuery (plugin only)

设置一个或多个滑块组件的选项值。
  • options
    Type: Object
    要设置的选项名与值之间的映射关系。
Code examples:

调用这个方法：

1
$( ".selector" ).slider( "option", { disabled: true } );

value()Returns: Number

获取滑块组件的值。
  • 这个方法不接收任何参数
Code examples:

调用这个方法：

1
var selection = $( ".selector" ).slider( "value" );

value( value )Returns: jQuery (plugin only)

设置滑块组件的值。
  • value
    Type: Number
    用来设置的值
Code examples:

调用这个方法：

1
$( ".selector" ).slider( "value", 55 );

values()Returns: Array

获取所有手柄的值.（愚人码头注：适用于多手柄的滑块）
  • 这个方法不接收任何参数
Code examples:

调用这个方法：

1
var values = $( ".selector" ).slider( "values" );

values( index )Returns: Number

获取指定手柄的值。（愚人码头注：适用于多手柄的滑块）
  • index
    Type: Integer
    从0开始计数的手柄索引值。
Code examples:

调用这个方法：

1
var value = $( ".selector" ).slider( "values", 0 );

values( index, value )Returns: jQuery (plugin only)

设置指定手柄的值。（愚人码头注：适用于多手柄的滑块）
  • index
    Type: Integer
    从0开始计数的手柄索引值。
  • value
    Type: Number
    要设置的值
Code examples:

调用这个方法：

1
$( ".selector" ).slider( "values", 0, 55 );

values( values )Returns: jQuery (plugin only)

设置所有手柄的值。（愚人码头注：适用于多手柄的滑块）
  • values
    Type: Array
    要设置的值。
Code examples:

调用这个方法：

1
$( ".selector" ).slider( "values", [ 55, 105 ] );

widget()Returns: jQuery

返回一个滑块元素的jQuery对象。
  • 这个方法不接收任何参数
Code examples:

调用widget 方法：

1
var widget = $( ".selector" ).slider( "widget" );

Events

change( event, ui )Type: slidechange

当用户滑动一个手柄后，如果滑块的值改变了，就会触发这个事件；或者通过value方法改变手柄值。
  • event
    Type: Event
  • ui
    Type: Object
    • handle
      Type: jQuery
      一个jQuery对象，表示被改变的手柄
    • value
      Type: Number
      当前滑块的值。
Code examples:

使用change 回调函数指定事件:

1
2
3
$( ".selector" ).slider({
  change: function( event, ui ) {}
});

绑定事件侦听器到slidechange事件：

1
$( ".selector" ).on( "slidechange", function( event, ui ) {} );

create( event, ui )Type: slidecreate

当滑块组件被创建时触发。

注意: ui对象是空的，但是为了与其它元素保持一直，它总是被包含。

Code examples:

使用create 回调函数指定事件:

1
2
3
$( ".selector" ).slider({
  create: function( event, ui ) {}
});

绑定一个事件监听器到 slidecreate 事件:

1
$( ".selector" ).on( "slidecreate", function( event, ui ) {} );

slide( event, ui )Type: slide

这个事件鼠标滑动滑块时触发。ui.value作为提供给事件的价值，表示将作为该当前移动手柄的结果值。 取消该事件会阻止手柄移动和手柄将继续其先前的值。取消该事件会阻止手柄移动并且手柄将继续其先前的值。
  • event
    Type: Event
  • ui
    Type: Object
    • handle
      Type: jQuery
      一个jQuery对象，表示当前移动的手柄
    • value
      Type: Number
      如果事件没有被取消，该手柄将移动到值 。
    • values
      Type: Array
      一个 多手柄滑块 当前值的数组。
Code examples:

使用slide 回调函数指定事件:

1
2
3
$( ".selector" ).slider({
  slide: function( event, ui ) {}
});

绑定一个事件监听器到 slide 事件:

1
$( ".selector" ).on( "slide", function( event, ui ) {} );

start( event, ui )Type: slidestart

当用户开始滑动滑块时触发。
  • event
    Type: Event
  • ui
    Type: Object
    • handle
      Type: jQuery
      一个jQuery对象，表示当前移动的手柄
    • value
      Type: Number
      滑块的当前值
Code examples:

使用start 回调函数指定事件:

1
2
3
$( ".selector" ).slider({
  start: function( event, ui ) {}
});

绑定一个事件监听器到 slidestart 事件:

1
$( ".selector" ).on( "slidestart", function( event, ui ) {} );

stop( event, ui )Type: slidestop

当用户滑动滑块后触发。
  • event
    Type: Event
  • ui
    Type: Object
    • handle
      Type: jQuery
      一个jQuery对象，表示移动后手柄。
    • value
      Type: Number
      滑块的当前值
Code examples:

使用stop 回调函数指定事件:

1
2
3
$( ".selector" ).slider({
  stop: function( event, ui ) {}
});

绑定一个事件监听器到 slidestop 事件:

1
$( ".selector" ).on( "slidestop", function( event, ui ) {} );

Example:

一个简单的 jQuery UI 滑块（Slider）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>

Demo:

来自 https://www.css88.com/jquery-ui-api/slider/#event-change

普通分类: 
jquery
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2