JqueryUI教程

JqueryUI - 滑块

← 上一节 下一节 →

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

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..... });


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

Sr.No.选项&安培;描述
1animate

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


选项 - 动画

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

这可以是 :

  • 布尔 : 设置为 true 时，句柄将使用默认持续时间设置动画.

  • 字符串 :

    速度名称，如慢，正常，或快

  • 数字 :

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

语法 

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

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


选项 - 已停用

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

语法 

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

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


选项 - 最大

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

语法 

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

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


选项 - 分钟

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

语法 

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

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

选项 - 方向

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

语法 

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

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

选项 - 范围

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

这可以是 :

  • 布尔 : 如果指定为 true ，并且滑块恰好有两个句柄，则会在句柄之间创建可以设置样式的元素.

  • 字符串 :

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

语法 

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

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

选项 - 步骤

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

语法 

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

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


选项 - 值

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

语法 

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

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


选项 - 值

此选项的类型为Array，可以创建多个句柄并指定这些句柄的初始值.此选项应该是一个可能值的数组，每个句柄一个.默认情况下，其值为 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）值（b）动画，以及（c）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的句柄。现在只需直接单击轴并查看动画效果。

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

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

<!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);;

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

Sr.No.Action & Description
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)使用的选项之一。 其中optionName是要获取的选项的名称。

Action - option( optionName )

此操作将检索指定的param选项的值。 此选项对应于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 )

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

Action - option( options )

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

Syntax

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

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

Action - value

此操作将检索options.value（滑块）的当前值。 仅在滑块是唯一的情况下使用（如果不是，请使用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" );

示例

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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.Event Method & Description
1change(event, ui)

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

Event - change(event, ui)

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

  • 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 : 表示已移动句柄的jQuery对象。

  • value : 滑块的当前值。

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的标准浏览器中打开它，你还必须看到以下输出


← 上一节 下一节 →

相关菜鸟教程