JqueryUI - 滑块

JqueryUI Slider - 从简单和简单的步骤学习JqueryUI，从基本到高级概念，包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单， Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

只要获得某个范围内的数值，就会使用滑块.滑块优于文本输入的优点是用户无法输入错误的值.他们可以使用滑块选择的任何值都是有效的.

jQueryUI通过滑块小部件为我们提供滑块控件. jQueryUI提供了slider()方法，用于更改页面中HTML元素的外观，添加新的CSS类，为其提供合适的样式.

语法

slider()方法可以使用两种形式 :

$(selector, context).slider (options) 方法
$(selector, context).slider ("action", params) 方法

$(selector, context).slider (options)方法

slider(options)方法声明应将HTML元素作为滑块进行管理. options 参数是一个指定滑块外观和行为的对象.

语法

$(selector, context).slider (options);

您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项，则使用逗号分隔它们，如下所示;

$(selector, context).slider({option1: value1, option2: value2..... });

下表列出了可与此方法一起使用的不同选项 :


  $(".selector").slider( {animate:"fast"} );
  $(".selector").slider( {disabled:true} );
  $(".selector").slider( {max:50} );
  $(".selector").slider( {min:10} );
  $(".selector").slider( {"option"，"orientation"} );
  $( ".selector").slider( {range:true} );
  $(".selector").slider( {step:5} );
  $(".selector").slider( {value:10} );
  $(".selector").slider( {values:[10,25]} );

Sr.No.	选项&安培;描述
1	animate 此选项设置为 true 时会创建动画效果用户直接在轴上单击.默认情况下，其值为 false . 选项 - 动画当设置为 true 时，此选项会在用户直接单击轴时创建动画效果.默认情况下，其值为 false . 这可以是 : 布尔 : 设置为 true 时，句柄将使用默认持续时间设置动画. 字符串 : 速度名称，如慢，正常，或快数字 : 动画的持续时间，以毫秒为单位. 语法 $(".selector").slider( {animate:"fast"} );
2	disabled 此选项设置为 true 时，禁用滑块.默认情况下，其值为 false . 选项 - 已停用此选项设置为 true 时，禁用滑块.默认情况下，其值为 false . 语法 $(".selector").slider( {disabled:true} );
3	max 此选项指定滑块可以达到的范围的上限值 - 当手柄移动到最右侧(对于水平滑块)或顶部(对于垂直滑块)时表示的值.默认情况下，其值 100 . 选项 - 最大此选项指定滑块可以达到的范围的上限值 - 当手柄移动到最右侧(对于水平滑块)或顶部(对于垂直滑块)时表示的值.默认情况下，其值 100 . 语法 $(".selector").slider( {max:50} );
4	min 此选项指定滑块可以达到的范围的较低值 - 当手柄移动到最左侧(对于水平滑块)或底部(对于垂直滑块)时表示的值.默认情况下，其值为 0 . 选项 - 分钟此选项指定滑块可以达到的范围的下限值 - 当手柄移动到最左侧(对于水平滑块)或底部(对于垂直滑块)时表示的值.默认情况下，其值为 0 . 语法 $(".selector").slider( {min:10} );
5	orientation 此选项指示滑块的水平或垂直方向.默认情况下，其值为水平. 选项 - 方向此选项指示滑块的水平或垂直方向.默认情况下，其值为水平. 语法 $(".selector").slider( {"option"，"orientation"} );
6	range 此选项指定滑块是否表示范围.默认情况下，其值为 false . 选项 - 范围此选项指定滑块是否表示范围.默认情况下，其值为 false . 这可以是 : 布尔 : 如果指定为 true ，并且滑块恰好有两个句柄，则会在句柄之间创建可以设置样式的元素. 字符串 : 可以 min 或最大的.如果指定，则分别从句柄到滑块的开头或结尾创建一个范围元素. 语法 $( ".selector").slider( {range:true} );
7	step 此选项指定允许滑块表示的最小值和最大值之间的离散间隔.默认情况下，其值 1 . 选项 - 步骤此选项指定允许滑块表示的最小值和最大值之间的离散间隔.默认情况下，其值为 1 . 语法 $(".selector").slider( {step:5} );
8	value 此选项指定单柄滑块的初始值.如果有多个句柄(请参阅值选项)，请指定第一个句柄的值.默认情况下，其值 1 . 选项 - 值 >此选项指定单手柄滑块的初始值.如果有多个句柄(请参阅值选项)，请指定第一个句柄的值.默认情况下，其值为 1 . 语法 $(".selector").slider( {value:10} );
9	values 此选项的类型为Array，会导致创建多个句柄并指定这些句柄的初始值.此选项应该是一个可能值的数组，每个句柄一个.默认情况下，其值为 null . 选项 - 值此选项的类型为Array，可以创建多个句柄并指定这些句柄的初始值.此选项应该是一个可能值的数组，每个句柄一个.默认情况下，其值为 null . 语法 $(".selector").slider( {values:[10,25]} );

以下部分将向您展示滑块功能的一些工作示例.

默认功能

以下示例演示滑块功能的简单示例，传递没有参数 slider()方法.

               jQuery UI Slider functionality

让我们将上述代码保存在HTML文件 sliderexample.htm 中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果

在上面的例子中，它是一个基本的水平滑块，有一个可以用鼠标移动或使用箭头键移动的手柄。

使用价值，动画和方向

下面的示例演示了三个选项的使用（a）值（b）动画，以及（c）JqueryUI滑块函数中的方向。

               jQuery UI Slider functionality

让我们将上述代码保存在HTML文件sliderexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。现在，你可以玩结果

在上面的例子中，滑块的值，即初始值设置为60，因此您可以看到初始值为60的句柄。现在只需直接单击轴并查看动画效果。

使用范围，最小值，最大值和值

以下示例演示了JqueryUI的滑块函数中三个选项（a）范围，（b）min，（c）max和（d）值的用法。

               jQuery UI Slider functionality                                                                   Price range:

让我们将上述代码保存在HTML文件sliderexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。现在，你可以玩结果

在上面的示例中，我们将range选项设置为true以使用两个拖动控制柄捕获一系列值。手柄之间的空间用不同的背景颜色填充，以指示选择了这些值。

$ (selector, context).slider ("action", params) 方法

slider ("action", params) 方法允许对滑块执行操作，例如将光标移动到新位置。该动作在第一个参数中被指定为一个字符串（例如，"value"表示光标的新值）。请查看下表中可以传递的操作。

语法

$(selector, context).slider ("action", params);;

下表列出了可以与此方法一起使用的不同操作


$( ".selector" ).slider("destroy");
$( ".selector" ).slider("disable");
$( ".selector" ).slider("enable");
var isDisabled = $( ".selector" ).slider( "option", "disabled" );
var options = $( ".selector" ).slider( "option" );
$( ".selector" ).slider( "option", "disabled", true );
$( ".selector" ).slider( "option", { disabled: true } );
$( ".selector" ).slider("value");
$( ".selector" ).slider( "value", 55 );
var values = $( ".selector" ).slider( "values" );
var value = $( ".selector" ).slider( "values", 0 );
$( ".selector" ).slider( "values", 0, 55 );
$( ".selector" ).slider( "values", [ 55, 105 ] );
var widget = $( ".selector" ).slider( "widget" );

Sr.No.	Action & Description
1	destroy 此操作会完全破坏元素的滑块功能。元素返回到pre-init状态。此方法不接受任何参数。 Action - destroy 此操作会完全破坏元素的滑块功能。元素返回到pre-init状态。此方法不接受任何参数。 Syntax $( ".selector" ).slider("destroy");
2	disable 此操作会禁用滑块功能。此方法不接受任何参数。 Action - disable 此操作会禁用滑块功能。此方法不接受任何参数。 Syntax $( ".selector" ).slider("disable");
3	enable 此操作启用滑块功能。此方法不接受任何参数 Action - enable 此操作启用滑块功能。此方法不接受任何参数 Syntax $( ".selector" ).slider("enable");
4	option( optionName ) 此操作将检索指定的param选项的值。此选项对应于slider (options)使用的选项之一。其中optionName是要获取的选项的名称。 Action - option( optionName ) 此操作将检索指定的param选项的值。此选项对应于slider (options)使用的选项之一。其中optionName是要获取的选项的名称。 Syntax var isDisabled = $( ".selector" ).slider( "option", "disabled" );
5	option() 此操作获取一个对象，其中包含表示当前滑块选项哈希的键/值对。 Action - option() 此操作获取一个对象，其中包含表示当前滑块选项哈希的键/值对。 Syntax var options = $( ".selector" ).slider( "option" );
6	option( optionName, value ) 此操作设置与指定的optionName关联的滑块选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的滑块选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。 Syntax $( ".selector" ).slider( "option", "disabled", true );
7	option( options ) 此操作为滑块设置一个或多个选项。参数选项是要设置的选项 - 值对的映射。 Action - option( options ) 此操作为滑块设置一个或多个选项。参数选项是要设置的选项 - 值对的映射。 Syntax $( ".selector" ).slider( "option", { disabled: true } );
8	value 此操作将检索options.value（滑块）的当前值。仅在滑块是唯一的情况下使用（如果不是，请使用slider ("values")）。此签名不接受任何参数。 Action - value 此操作将检索options.value（滑块）的当前值。仅在滑块是唯一的情况下使用（如果不是，请使用slider ("values")）。此签名不接受任何参数。 Syntax $( ".selector" ).slider("value");
9	value( value ) 此操作设置滑块的值。 Action - value( value ) 此操作设置滑块的值。 Syntax $( ".selector" ).slider( "value", 55 );
10	values 此操作将检索options.values的当前值（数组中滑块的值）。此签名不接受任何参数。 Action - values 此操作将检索options.values的当前值（数组中滑块的值）。此签名不接受任何参数。 Syntax var values = $( ".selector" ).slider( "values" );
11	values( index ) 此操作获取指定句柄的值。其中index的类型为Integer，并且是句柄的从零开始的索引。 Action - values( index ) 此操作获取指定句柄的值。其中index的类型为Integer，并且是句柄的从零开始的索引。 Syntax var value = $( ".selector" ).slider( "values", 0 );
12	values( index, value ) 此操作设置指定句柄的值。其中index是句柄的从零开始的索引，value是要设置的值。 Action - values( index, value ) 此操作设置指定句柄的值。其中index是句柄的从零开始的索引，value是要设置的值。 Syntax $( ".selector" ).slider( "values", 0, 55 );
13	values( values ) 他的动作设置了所有句柄的值。 Action - values( values ) 他的动作设置了所有句柄的值。 Syntax $( ".selector" ).slider( "values", [ 55, 105 ] );
14	widget 此操作返回包含滑块的jQuery对象。此方法不接受任何参数。 Action - widget 此操作返回包含滑块的jQuery对象。此方法不接受任何参数。 Syntax var widget = $( ".selector" ).slider( "widget" );

示例

现在让我们看一个使用上表中的操作的示例。以下示例演示了disable()和value()方法的用法。

               jQuery UI Slider functionality                                                                         Minumum value:

让我们将上面的代码保存在HTML文件sliderexample.htm中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出

在上面的示例中，第一个滑块被禁用，第二个滑块的值被设置为50。

滑块元素的事件管理

除了我们在前面部分中看到的滑块（选项）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。这些事件方法如下所列


$( ".selector" ).slider({   change: function( event, ui ) {}});
$( ".selector" ).slider({   create: function( event, ui ) {}});
$( ".selector" ).slider({   slide: function( event, ui ) {}});
$( ".selector" ).slider({   start: function( event, ui ) {}});
$( ".selector" ).slider({   stop: function( event, ui ) {}});

Sr.No.	Event Method & Description
1	change(event, ui) 此事件通过用户操作或以编程方式触发句柄的值更改。 Event - change(event, ui) 此事件通过用户操作或以编程方式触发句柄的值更改。其中event是Event类型，ui是Object类型。 ui的可能值是 handle :表示已更改句柄的jQuery对象。 value : 滑块的当前值。 Syntax $( ".selector" ).slider({ change: function( event, ui ) {}});
2	create(event, ui) 创建滑块时会触发此事件。 Event - create(event, ui) 创建滑块时会触发此事件。其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).slider({ create: function( event, ui ) {}});
3	slide(event, ui) 只要通过滑块拖动手柄，就会触发鼠标移动事件。返回false会取消幻灯片。 Event - slide(event, ui) 只要通过滑块拖动手柄，就会触发鼠标移动事件。返回false会取消幻灯片。其中event是Event类型，ui是Object类型。 ui的可能值是 handle :表示要移动的句柄的jQuery对象。 value :如果未取消事件，句柄将移动到的值。 values : 多处理滑块的当前值的数组。 Syntax $( ".selector" ).slider({ slide: function( event, ui ) {}});
4	start(event, ui) 用户开始滑动时会触发此事件。 Event - start(event, ui) 用户开始滑动时会触发此事件。其中event是Event类型，ui是Object类型。 ui的可能值是 handle :表示要移动的句柄的jQuery对象。 value : 滑块的当前值。 Syntax $( ".selector" ).slider({ start: function( event, ui ) {}});
5	stop(event, ui) 幻灯片停止时会触发此事件。 Event - stop(event, ui) 幻灯片停止时会触发此事件。其中event是Event类型，ui是Object类型。 ui的可能值是 handle : 表示已移动句柄的jQuery对象。 value : 滑块的当前值。 Syntax $( ".selector" ).slider({ stop: function( event, ui ) {}});

示例

以下示例演示滑块功能期间的事件方法用法。此示例演示了事件的启动，停止，更改和幻灯片的使用。

               jQuery UI Slider functionality                                                                         Start:               
               Stop:               
               Change:               
               Slide:

让我们将上面的代码保存在HTML文件sliderexample.htm中并在支持javascript的标准浏览器中打开它，你还必须看到以下输出