JqueryUI - 滑块

每当要获得特定范围内的数值时，就会使用滑块。滑块相对于文本输入的优点是用户不可能输入错误的值。他们可以使用滑块选择的任何值都是有效的。

jQueryUI通过滑块小部件为我们提供了滑块控件。jQueryUI 提供 slider() 方法来更改页面中 HTML 元素的外观，添加新的 CSS 类以赋予它们适当的样式。

句法

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

$(选择器,上下文).slider(选项)方法

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

句法

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

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

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

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

先生。 选项和说明
1 动画化

当此选项设置为true时，当用户直接单击轴时会创建动画效果。默认情况下它的值为false。

选项-动画

当此选项设置为true时，当用户直接单击轴时会创建动画效果。默认情况下它的值为false。

这可以是类型 -

  • Boolean - 当设置为true时，手柄将以默认持续时间进行动画处理。

  • 字符串-

    速度的名称，例如慢速、正常或快速

  • 数量-

    动画的持续时间，以毫秒为单位。

句法

$( ".selector" ).slider(
   { animate: "fast" }
);
2 残疾人

当此选项设置为true时，将禁用滑块。默认情况下它的值为false。

选项 - 禁用

当此选项设置为true时，将禁用滑块。默认情况下它的值为false。

句法

$( ".selector" ).slider(
   { disabled: true }
);
3 最大限度

此选项指定滑块可以达到的范围的上限值，即当手柄移动到最右侧（对于水平滑块）或顶部（对于垂直滑块）时表示的值。默认情况下其值为100。

选项 - 最大

此选项指定滑块可以达到的范围的上限值，即当手柄移动到最右侧（对于水平滑块）或顶部（对于垂直滑块）时表示的值。默认情况下其值为100。

句法

$( ".selector" ).slider(
   { max: 50 }
);
4 分钟

此选项指定滑块可以达到的范围的下限值 - 当手柄移动到最左侧（对于水平滑块）或底部（对于垂直滑块）时表示的值。默认情况下其值为0。

选项 - 分钟

此选项指定滑块可以达到的范围的下限值 - 当手柄移动到最左侧（对于水平滑块）或底部（对于垂直滑块）时表示的值。默认情况下其值为0。

句法

$( ".selector" ).slider(
   { min: 10 }
);
5 方向

此选项指示滑块的水平或垂直方向。默认情况下它的值是水平的。

选项 - 方向

此选项指示滑块的水平或垂直方向。默认情况下它的值是水平的。

句法

$( ".selector" ).slider(
   { "option", "orientation" }
);
6 范围

此选项指定滑块是否代表一个范围。默认情况下它的值为false。

选项 - 范围

此选项指定滑块是否代表一个范围。默认情况下它的值为false。

这可以是类型 -

  • Boolean − If specified as true, and the slider has exactly two handles, an element that can be styled is created between the handles.

  • String −

    Can be min or max. If specified creates a range element from the handle to the beginning or end of the slider respectively.

Syntax

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

此选项指定允许滑块表示的最小值和最大值之间的离散间隔。默认情况下其值为1。

Option - step

This option specifies discrete intervals between the minimum and maximum values that the slider is allowed to represent. By default its value is 1.

Syntax

$( ".selector" ).slider(
   { step: 5 }
);
8 价值

该选项指定单手柄滑块的初始值。如果有多个句柄（请参阅值选项），请指定第一个句柄的值。默认情况下其值为1。

Option - value

>This option specifies the initial value of a single-handle slider. If there are multiple handles (see the values options), specifies the value for the first handle. By default its value is 1.

Syntax

$( ".selector" ).slider(
   { value: 10 }
);
9 价值观

此选项的类型为数组，会导致创建多个句柄并指定这些句柄的初始值。该选项应该是一组可能的值，每个句柄一个。默认情况下它的值为null。

Option - values

This option is of type Array and causes multiple handles to be created and specifies the initial values for those handles. This option should be an array of possible values, one for each handle. By default its value is null.

Syntax

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

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

默认功能

以下示例演示了滑块功能的简单示例，未向slider()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-1" ).slider();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-1"></div>
   </body>
</html>

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

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

使用价值、动画和方向

下面的示例演示了JqueryUI 滑块功能中三个选项(a) 值 (b) 动画(b)动画(c) 方向 (orientation)的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-2" ).slider({
               value: 60,
               animate:"slow",
               orientation: "horizontal"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-2"></div>
   </body>
</html>

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

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

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

以下示例演示了JqueryUI 滑块函数中三个选项(a) range、(b) min、(c) max和(d) value的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-3" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               slide: function( event, ui ) {
                  $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
            });
            $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
               " - $" + $( "#slider-3" ).slider( "values", 1 ) );
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>
         <label for = "price">Price range:</label>
         <input type = "text" id = "price" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-3"></div>
   </body>
</html>

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

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

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

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

句法

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

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

先生。 动作与描述
1 破坏

此操作完全破坏了元素的滑块功能。元素返回到其初始化前的状态。此方法不接受任何参数。

Action - destroy

This action destroys the slider functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

Syntax

$( ".selector" ).slider("destroy");
2 禁用

此操作会禁用滑块功能。此方法不接受任何参数。

Action - disable

This action disables the slider functionality. This method does not accept any arguments.

Syntax

$( ".selector" ).slider("disable");
3 使能够

此操作启用滑块功能。此方法不接受任何参数。

Action - enable

This action enables the slider functionality. This method does not accept any arguments.

Syntax

$( ".selector" ).slider("enable");
4 选项（选项名称）

此操作检索指定参数选项的值。此选项对应于与slider (options)一起使用的选项之一。其中optionName是要获取的选项的名称。

Action - option( optionName )

This action retrieves the value of the specified param option. This option corresponds to one of those used with slider (options). Where optionName is the name of the option to get.

Syntax

var isDisabled = $( ".selector" ).slider( "option", "disabled" );
5 选项（）

此操作获取一个对象，其中包含表示当前滑块选项哈希的键/值对。

Action - option()

This action gets an object containing key/value pairs representing the current slider options hash.

Syntax

var options = $( ".selector" ).slider( "option" );
6 选项（选项名称，值）

此操作设置与指定optionName关联的滑块选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。

Action - option( optionName, value )

This action sets the value of the slider option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.

Syntax

$( ".selector" ).slider( "option", "disabled", true );
7 选项（选项）

此操作为滑块设置一个或多个选项。参数options是要设置的选项值对的映射。

Action - option( options )

This action sets one or more options for the slider. The argument options is a map of option-value pairs to be set.

Syntax

$( ".selector" ).slider( "option", { disabled: true } );
8 价值

此操作检索options.value （滑块）的当前值。仅当滑块唯一时才使用（如果不是，则使用slider ("values")）。该签名不接受任何参数。

Action - value

This action retrieves the current value of options.value (the indicator). Use only if the indicator is unique (if not, use slider ("values")). This signature does not accept any arguments.

Syntax

$( ".selector" ).slider("value");
9 值（值）

此操作设置滑块的值。

Action - value( value )

This action sets the value of the slider.

Syntax

$( ".selector" ).slider( "value", 55 );
10 价值观

此操作检索options.values的当前值（数组中滑块的值）。该签名不接受任何参数。

Action - values

This action retrieves the current value of options.values (the value of the sliders in an array). This signature does not accept any arguments.

Syntax

var values = $( ".selector" ).slider( "values" );
11 值（索引）

此操作获取指定句柄的值。其中，index的类型为 Integer，并且是句柄的从零开始的索引。

Action - values( index )

This action gets the value for the specified handle. Where index is of type Integer and is a zero-based index of the handle.

Syntax

var value = $( ".selector" ).slider( "values", 0 );
12 值（索引，值）

此操作设置指定句柄的值。其中index是句柄的从零开始的索引，value是要设置的值。

Action - values( index, value )

This action sets the value for the specified handle. Where index is the zero-based index of the handle and value is the value to set.

Syntax

$( ".selector" ).slider( "values", 0, 55 );
13 值（值）

此操作设置所有句柄的值。

Action - values( values )

This action sets the value for all the handles.

Syntax

$( ".selector" ).slider( "values", [ 55, 105 ] );
14 小部件

此操作返回一个包含滑块的 jQuery 对象。此方法不接受任何参数。

Action - widget

This action returns a jQuery object containing the slider. This method does not accept any arguments.

Syntax

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

例子

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-4" ).slider({
               orientation:"vertical"	
            });
            $( "#slider-4" ).slider('disable');
            $( "#slider-5" ).slider({
               orientation:"vertical",
               value:50,
               slide: function( event, ui ) {
                  $( "#minval" ).val( ui.value );
               }	
            });
            $( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-4"></div>
      <p>
         <label for = "minval">Minumum value:</label>
         <input type = "text" id = "minval" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-5"></div>
   </body>
</html>

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

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

滑块元素上的事件管理

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

先生。 活动方式及说明
1 更改（事件，用户界面）

此事件通过用户操作或以编程方式触发句柄的值更改。

Event - change(event, ui)

This event is triggered handle’s value changes, either through user action or programmatically. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • handle − A jQuery object representing the handle that was changed.

  • value − The current value of the slider.

Syntax

$( ".selector" ).slider({
   change: function( event, ui ) {}
});
2 创建（事件，用户界面）

创建滑块时会触发此事件。

Event - create(event, ui)

This event is triggered when the slider is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).slider({
   create: function( event, ui ) {}
});
3 幻灯片（事件，用户界面）

每当手柄通过滑块拖动时，鼠标移动事件就会触发此事件。返回 false 会取消幻灯片。

Event - slide(event, ui)

This event is triggered for mouse move events whenever the handle is being dragged through the slider. Returning false cancels the slide. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • handle − A jQuery object representing the handle being moved.

  • value − The value that the handle will move to if the event is not canceled.

  • values − An array of the current values of a multi-handled slider.

Syntax

$( ".selector" ).slider({
   slide: function( event, ui ) {}
});
4 开始（事件，用户界面）

当用户开始滑动时触发该事件。

Event - start(event, ui)

This event is triggered when the user starts sliding. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • handle − A jQuery object representing the handle being moved.

  • value − The current value of the slider.

Syntax

$( ".selector" ).slider({
   start: function( event, ui ) {}
});
5 停止（事件，用户界面）

当幻灯片停止时会触发此事件。

Event - stop(event, ui)

This event is triggered when a slide stops. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • handle − A jQuery object representing the handle that was moved.

  • value − The current value of the slider.

Syntax

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

例子

以下示例演示了滑块功能期间事件方法的使用。此示例演示了事件开始、停止、更改和滑动的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-6" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               start: function( event, ui ) {
                  $( "#startvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               stop: function( event, ui ) {
                  $( "#stopvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               change: function( event, ui ) {
                  $( "#changevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               slide: function( event, ui ) {
                  $( "#slidevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-6"></div>
      <p>
         <label for = "startvalue">Start:</label>
         <input type = "text" id = "startvalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "stopvalue">Stop:</label>
         <input type = "text" id = "stopvalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "changevalue">Change:</label>
         <input type = "text" id = "changevalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "slidevalue">Slide:</label>
         <input type = "text" id = "slidevalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
   </body>
</html>

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