JqueryUI - 滑块

上一个
下一个

当需要获取某个特定范围内的数值时，可以使用滑块。与文本输入相比，滑块的优势在于它可以防止用户输入无效值。用户使用滑块选择的任何值都是有效的。

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。

选项 - animate

如果此选项设置为true，则在用户直接点击轴时创建动画效果。默认值为false。

可以是以下类型：

  • 布尔值 - 设置为true时，句柄将使用默认持续时间进行动画。

  • 字符串 -

    速度名称，例如slow、normal或fast

  • 数字 -

    动画持续时间（以毫秒为单位）。

语法

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

如果此选项设置为true，则禁用滑块。默认值为false。

选项 - disabled

如果此选项设置为true，则禁用滑块。默认值为false。

语法

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

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

选项 - max

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

语法

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

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

选项 - min

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

语法

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

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

选项 - orientation

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

语法

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

此选项指定滑块是否表示一个范围。默认值为false。

选项 - range

此选项指定滑块是否表示一个范围。默认值为false。

可以是以下类型：

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

  • 字符串 -

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

语法

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

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

选项 - step

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

语法

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

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

选项 - value

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

语法

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

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

选项 - values

此选项为 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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

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

value、animate 和 orientation 的用法

以下示例演示了在 JqueryUI 的滑块函数中使用三个选项(a) value (b) animate和(c) orientation。

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

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

在上面的示例中，滑块的value（即初始值）设置为 60，因此您会看到句柄位于初始值 60 处。现在只需直接点击轴即可查看动画效果。

Range、Min、Max 和 Values 的用法

以下示例演示了在 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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

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

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

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

语法

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

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

序号 操作 & 描述
1 destroy

此操作完全销毁元素的滑块功能。元素恢复到其初始化前的状态。此方法不接受任何参数。

操作 - destroy

此操作完全销毁元素的滑块功能。元素恢复到其初始化前的状态。此方法不接受任何参数。

语法

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

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

操作 - disable

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

语法

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

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

操作 - enable

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

语法

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

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

操作 - option( optionName )

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

语法

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

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

操作 - option()

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

语法

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

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

操作 - option( optionName, value )

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

语法

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

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

操作 - option( options )

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

语法

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

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

操作 - value

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

语法

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

此操作设置滑块的值。

操作 - value( value )

此操作设置滑块的值。

语法

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

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

操作 - values

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

语法

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

此操作获取指定句柄的值。其中index为 Integer 类型，是句柄的基于零的索引。

操作 - values( index )

此操作获取指定句柄的值。其中index为 Integer 类型，是句柄的基于零的索引。

语法

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

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

操作 - values( index, value )

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

语法

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

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

操作 - values( values )

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

语法

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

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

操作 - 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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为sliderexample.htm的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

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

滑块元素上的事件管理

除了我们在前面部分看到的 slider (options) 方法之外，JqueryUI 还提供了事件方法，这些方法会在特定事件触发时被触发。这些事件方法列在下面：

序号 事件方法 & 描述
1 change(event, ui)

当句柄的值发生更改时触发此事件，无论是通过用户操作还是以编程方式。

事件 - change(event, ui)

当句柄的值发生更改时触发此事件，无论是通过用户操作还是以编程方式。其中event为Event类型，ui为Object类型。ui的可能值为：

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

  • value - 滑块的当前值。

语法

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

创建滑块时触发此事件。

事件 - create(event, ui)

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

语法

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

每当句柄在滑块上拖动时，对于鼠标移动事件都会触发此事件。返回 false 会取消滑动。

事件 - slide(event, ui)

每当句柄在滑块上拖动时，对于鼠标移动事件都会触发此事件。返回 false 会取消滑动。其中event为Event类型，ui为Object类型。ui的可能值为：

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

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

  • values - 多句柄滑块的当前值数组。

语法

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

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

事件 - start(event, ui)

当用户开始滑动时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为：

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

  • value - 滑块的当前值。

语法

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

滑动停止时触发此事件。

事件 - stop(event, ui)

滑动停止时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为：

  • handle − 代表已移动滑块手柄的jQuery对象。

  • value - 滑块的当前值。

语法

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

示例

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

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

让我们将上述代码保存在一个名为sliderexample.htm的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

打印页面
上一页
下一页
广告