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.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>

讓我們將上述程式碼儲存在一個名為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.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>

讓我們將上述程式碼儲存在一個名為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.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>

讓我們將上述程式碼儲存在一個名為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.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>

讓我們將上述程式碼儲存在一個名為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.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>

讓我們將上述程式碼儲存在一個名為sliderexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.