jQuery UI Slider

jQuery UI Slider

jQuery UI Slider用于获取一定范围内的数值。与文本输入相比,滑块的主要优点是用户无法输入无效值。他们可以使用滑块选择的每个值都是有效的。
语法:
您可以以两种形式使用slider()方法:
 $(selector, context).slider(options)
 $(selector, context).slider("action", params)thod

第一种方法

 $(selector, context).slider(options)
slider(options)方法指定应将HTML元素作为滑块进行管理。这里的options参数是一个指定滑块外观和行为的对象。
您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:
 $(selector, context).slider({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表。
选项 说明
animate 如果将此选项设置为true,则当用户直接在轴上单击时,它将创建动画效果。默认情况下,其值为false。
disabled 如果将此选项设置为true,它将禁用滑块。默认情况下,其值为false。
max 此选项用于指定滑块可以达到的范围的上限值-将手柄移到最右边(对于水平滑块)或顶部(对于垂直滑块)时表示的值。默认情况下,其值为100。
min 此选项用于指定滑块可达到的范围的下限值-将手柄移到最左端(对于水平滑块)或最底端(对于垂直滑块)时表示的值。默认情况下,其值为0。
orientation 此选项指定滑块的水平或垂直方向。默认情况下,其值为水平。
range 此选项指示滑块是否代表一个范围。默认情况下,其值为false。
step 此选项用于指定允许滑块表示的最小值和最大值之间的离散间隔。默认情况下,其值为1。
value 此选项用于指定单手柄滑块的初始值。如果有多个句柄(请参阅值选项),则它指定第一个句柄的值。默认情况下,其值为1。
values 此选项是数组类型,将导致创建多个句柄并指定这些句柄的初始值。此选项应该是可能值的数组,每个句柄一个。默认情况下,其值为null。

jQueryUI slide()示例1

让我们举一个简单的示例来演示滑块功能,不将任何参数传递给slider()方法。
 <!doctype html>
<html lang="en">
   <head><meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
      <title>jQuery UI Slider functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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>

jQueryUI Slider()示例2

使用value, animate 和 orientation:
让我们以一个示例进行演示jQueryUI滑块功能中选项值,动画和方向的用法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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>

jQueryUI slide()示例3

使用range, min, max 和 values:
以下示例显示jQueryUI滑块功能中选项range, min, max 和 values的用法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-3").slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 50, 300 ],
               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:red; font-weight:bold;">
      </p>
      <div id="slider-3"></div>
   </body>
</html>

第二种方法

 $(selector, context).slider("action", params)
slider("action", params)方法在滑块上指定一个动作,例如将光标移动到新位置。此操作在第一个参数中指定为字符串(例如,"value"表示光标的新值)。在下表中检查可以传递的动作。
以下是可与该方法一起使用的不同动作的列表:
动作 说明
destroy 此操作用于完全destroy元素的滑块功能。元素返回其预初始化状态。此方法不接受任何参数。
disable 此操作用于禁用滑块功能。此方法不接受任何参数。
enable 此操作用于启用滑块功能。此方法不接受任何参数。
option(optionName) 此操作用于检索指定的param选项的值。此选项对应于与滑块一起使用的选项之一。这里的optionName是要获取的选项的名称。
option 此操作获取一个对象,该对象包含表示当前滑块选项哈希的键/值对。
option(optionName,value) 此操作设置与指定的optionName关联的滑块选项的值。参数optionName是要设置的选项的名称,value是要为该选项设置的值。
option(options) 此操作为滑块设置一个或多个选项。 options参数是要设置的选项-值对的映射。
value 此操作用于检索options.value的当前值(滑块)。仅当滑块是唯一的时才使用(否则,请使用滑块("值"))。此签名不接受任何参数。
value(value) 此操作用于设置滑块的值。
values 此操作将检索options.values的当前值(数组中滑块的值)。此签名不接受任何参数。
values(index) 此操作获取指定句柄的值。这里的索引是整数类型,是句柄的从零开始的索引。
values(index,value) 此操作设置指定句柄的值。这里的index是句柄的从零开始的索引,而value是要设置的值。
values(values) 此操作设置所有手柄的值。
widget 此操作将返回一个包含滑块的jQuery对象。此方法不接受任何参数。

jQueryUI slide()示例4

让我们以一个示例来演示上表中的操作。在此示例中,我们使用disable()和value()方法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-4").slider({
               orientation:"horizontal"
            });
            $( "#slider-4").slider('disable');
            $( "#slider-5").slider({
               orientation:"horizontal",
               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:red; font-weight:bold;">
         </p>
         <div id="slider-5"></div>
   </body>
</html>