登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

滑块（Slider）

优质
小牛编辑
123浏览
2023-12-01

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

jQueryUI通过滑块小部件为我们提供了一个滑块控件。 jQueryUI提供了slider（）方法，可以更改页面中HTML元素的外观，添加新的CSS类，为它们提供合适的样式。

语法 (Syntax)

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

  • $（selector，context）.slider（options）方法

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

$（selector，context）.slider（options）方法

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

语法 (Syntax)

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

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

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

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

Sr.No.选项和说明
1animate

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

Option - animate

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

这可以是 -

  • Boolean - 设置为true ，句柄将使用默认持续时间进行动画处理。

  • String -

    速度的名称，如slow, normal,或fast

  • Number -

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

Syntax

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

此选项设置为true ，禁用滑块。 默认情况下，其值为false 。

Option - disabled

此选项设置为true ，禁用滑块。 默认情况下，其值为false 。

Syntax

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

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

Option - max

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

Syntax

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

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

Option - min

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

Syntax

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

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

Option - orientation

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

Syntax

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

此选项指定滑块是否表示范围。 默认情况下，其值为false 。

Option - range

此选项指定滑块是否表示范围。 默认情况下，其值为false 。

这可以是 -

  • Boolean - 如果指定为true ，并且滑块只有两个句柄，则会在句柄之间创建可以设置样式的元素。

  • String -

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

Syntax

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

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

Option - step

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

Syntax

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

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

Option - value

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

Syntax

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

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

Option - values

此选项的类型为Array，并导致创建多个句柄并指定这些句柄的初始值。 此选项应该是一个可能值的数组，每个句柄一个。 默认情况下，其值为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的标准浏览器中打开它，您还必须看到以下输出。

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

使用价值，动画和方向

下面的示例演示了三个选项的使用(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的标准浏览器中打开它，您还必须看到以下输出。

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

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

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

<!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”表示光标的新值）。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No.行动和描述
1destroy

此操作会完全破坏元素的滑块功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy

此操作会完全破坏元素的滑块功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

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

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

Action - disable

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

Syntax

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

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

Action - enable

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

Syntax

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

此操作将检索指定的param选项的值。 此选项对应于slider (options)使用的slider (options) 。 其中optionName是要获取的选项的名称。

Action - option( optionName )

此操作将检索指定的param选项的值。 此选项对应于slider (options)使用的slider (options) 。 其中optionName是要获取的选项的名称。

Syntax

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

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

Action - option()

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

Syntax

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

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

Action - option( optionName, value )

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

Syntax

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

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

Action - option( options )

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

Syntax

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

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

Action - value

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

Syntax

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

此操作设置滑块的值。

Action - value( value )

此操作设置滑块的值。

Syntax

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

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

Action - values

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

Syntax

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

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

Action - values( index )

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

Syntax

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

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

Action - values( index, value )

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

Syntax

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

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

Action - values( values )

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

Syntax

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

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

Action - widget

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

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No.事件方法和描述
1change(event, ui)

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

Event - change(event, ui)

此事件通过用户操作或以编程方式触发句柄的值更改。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • handle - 表示已更改handle的jQuery对象。

  • value - 滑块的当前值。

Syntax

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

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

Event - create(event, ui)

创建滑块时会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

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

Event - slide(event, ui)

只要通过滑块拖动手柄，就会触发鼠标移动事件。 返回false会取消幻灯片。 其中event是Event类型， ui是Object类型。 ui可能值是 -

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

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

  • values - 多处理滑块的当前值数组。

Syntax

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

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

Event - start(event, ui)

用户开始滑动时会触发此事件。 其中event是Event类型， ui是Object类型。 ui可能值是 -

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

  • value - 滑块的当前值。

Syntax

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

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

Event - stop(event, ui)

幻灯片停止时会触发此事件。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • handle - 表示已移动handle的jQuery对象。

  • value - 滑块的当前值。

Syntax

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

例子 (Example)

以下示例演示滑块功能期间的事件方法用法。 此示例演示了事件的start ， stop ， change和slide 。

<!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的标准浏览器中打开它

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn