JqueryUI - 滑块小部件

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

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

语法

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


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

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

语法

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

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

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

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

序号 选项 & 说明
1 animate

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

Option - animate

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

这可能是类型 −

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

  • String

    速度的名称,例如 slow, normal,fast
  • Number

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

语法

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

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

Option - disabled

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

语法

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

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

Option - max

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

语法

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

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

Option - min

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

语法

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

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

Option - orientation

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

语法

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

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

Option - range

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

这可以是类型 −

  • Boolean − 如果指定为 true,并且滑块恰好有两个手柄,则在手柄之间创建一个可以设置样式的元素。

  • String

    可以是 minmax。 如果指定,则分别从句柄到滑块的开头或结尾创建一个范围元素。

语法

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

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

Option - step

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

语法

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

此选项指定单手柄滑块的初始值。 如果有多个句柄(请参阅值选项),请指定第一个句柄的值。 默认情况下,它的值为 1

Option - value

>此选项指定单手柄滑块的初始值。 如果有多个句柄(请参阅值选项),请指定第一个句柄的值。 默认情况下,它的值为 1

语法

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

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

Option - values

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

语法

$( ".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 的标准浏览器中打开它,您应该会看到以下输出。 现在,您可以查看结果 −

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

值、动画和方向的使用

以下示例演示了三个选项 (a) value (b) animate(c) orientation 在 JqueryUI 的滑块功能中的用法。

<!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的手柄。现在直接点击轴就可以看到动画效果。

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

以下示例演示了三个选项 (a) range、(b) min(c) max(d) values 在 JqueryUI 的滑块功能中的用法。

<!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 的标准浏览器中打开它,您应该会看到以下输出。 现在,您可以查看结果 −

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


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

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

语法

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

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

序号 操作 & 说明
1 destroy

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

Action - destroy

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

语法

$( ".selector" ).slider("destroy");
2 disable

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

Action - disable

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

语法

$( ".selector" ).slider("disable");
3 enable

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

Action - enable

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

语法

$( ".selector" ).slider("enable");
4 option( optionName )

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

Action - option( optionName )

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

语法

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

此操作获取一个包含表示当前滑块选项散列的键/值对的对象。

Action - option()

此操作获取一个包含表示当前滑块选项散列的键/值对的对象。

语法

var options = $( ".selector" ).slider( "option" );
6 option( optionName, value )

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

Action - option( optionName, value )

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

语法

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

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

Action - option( options )

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

语法

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

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

Action - value

此操作检索 options.value(指标) 的当前值。 仅在指标唯一时使用(如果不是,请使用 slider ("values"))。 此签名不接受任何参数。

语法

$( ".selector" ).slider("value");
9 value( value )

此操作设置滑块的值。

Action - value( value )

此操作设置滑块的值。

语法

$( ".selector" ).slider( "value", 55 );
10 values

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

Action - values

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

语法

var values = $( ".selector" ).slider( "values" );
11 values( index )

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

Action - values( index )

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

语法

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

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

Action - values( index, value )

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

语法

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

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

Action - values( values )

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

语法

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

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

Action - widget

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

语法

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 change(event, ui)

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

Event - change(event, ui)

此事件通过用户操作或以编程方式触发句柄的值更改。 其中eventEvent类型,uiObject类型。 ui 的可能值是 −

  • handle − 表示已更改句柄的 jQuery 对象。

  • value − 滑块的当前值。

语法

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

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

Event - create(event, ui)

创建滑块时会触发此事件。 其中eventEvent类型,uiObject类型。

语法

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

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

Event - slide(event, ui)

每当通过滑块拖动手柄时,都会为鼠标移动事件触发此事件。 返回 false 取消幻灯片。 其中eventEvent类型,uiObject类型。ui 的可能值是 −

  • handle − 表示正在移动的句柄的 jQuery 对象。

  • value − 如果事件未取消,句柄将移动到的值。

  • values − 多手柄滑块的当前值数组。

语法

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

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

Event - start(event, ui)

当用户开始滑动时触发此事件。 其中eventEvent类型,uiObject类型。 ui 的可能值是 −

  • handle − 表示正在移动的句柄的 jQuery 对象。

  • value − 滑块的当前值。

语法

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

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

Event - stop(event, ui)

当幻灯片停止时触发此事件。 其中eventEvent类型,uiObject类型。 ui 的可能值是 −

  • handle − 表示移动的句柄的 jQuery 对象。

  • value − 滑块的当前值。

语法

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

示例

以下示例演示了滑块功能期间的事件方法用法。 此示例演示了事件 startstopchangeslide 的使用。

<!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 的标准浏览器中打开它,您应该会看到以下输出 −