script.aculo.us - 建立滑塊

滑塊是帶有一個或多個手柄的細軌，使用者可以在軌跡上拖動這些手柄。

滑塊的目的是提供一種替代的輸入方法來定義數值；滑塊表示一個範圍，沿著軌道滑動手柄定義此範圍內的值。

滑塊可以是水平或垂直方向。水平方向時，軌道的左端通常表示最小值，而垂直方向時，滑塊的底部通常表示最小值。

要使用 script.aculo.us 的滑塊功能，您需要載入 slider.js 模組以及 prototype.js 模組。因此，您對 script.aculo.us 的最小載入將如下所示：

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

建立滑塊控制元件

建立滑塊通常是透過在頁面 DOM 中的一些現有元素上構建自定義物件來實現的。您在這裡需要兩個元素，一個用於手柄，另一個用於軌道，如下所示：

new Control.Slider(handle, track [ , options ] );

軌道元素通常是<div>，而手柄元素是軌道元素內的<div>或<span>。這兩個元素都可以透過它們的 id= 或直接的 DOM 引用傳遞，這與往常一樣。

滑塊選項

在建立滑塊物件時，您可以使用以下一個或多個選項。

序號	選項和描述
1	軸將控制元件的方向定義為水平或垂直。預設方向為水平。
2	範圍將滑塊值的範圍定義為 Prototype ObjectRange 例項。預設為 0 到 1。
3	值定義滑塊可以獲取的離散值集。如果省略，則可以設定範圍內的所有值。
4	sliderValue 設定滑塊的初始值。如果省略，則滑塊最左側（或最頂部）邊緣表示的值為初始值。
5	停用如果為 true，則建立一個最初停用的滑塊。顯然預設為 false。
6	setValue 將更新滑塊的值，從而將滑塊手柄移動到適當的位置。
7	setDisabled 將滑塊設定為停用狀態（disabled = true）。
8	setEnabled 將滑塊設定為啟用狀態（disabled = false）。

您可以在 options 引數中提供以下回調函式：

序號	選項和描述
1	onSlide 每當透過拖動移動滑塊時呼叫。呼叫的函式獲取滑塊值作為其引數。
2	onChange 每當滑塊完成移動或其值透過 setSlider Value 函式更改時呼叫。呼叫的函式獲取滑塊值作為其引數。

序號

選項和描述

onSlide

每當透過拖動移動滑塊時呼叫。呼叫的函式獲取滑塊值作為其引數。

onChange

每當滑塊完成移動或其值透過 setSlider Value 函式更改時呼叫。呼叫的函式獲取滑塊值作為其引數。

滑塊示例

即時演示

<html>
   <head>
      <title>Sliders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){
               $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
            new Control.Slider('handle2' , 'track2', {
               range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v;
               }

               onSlide: function(v) {
                  $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

注意事項

您可以使用 CSS 更改任何滑塊的滑塊影像。使用 CSS 屬性background-image: url(track.gif)和background-repeat: no-repeat來設定滑塊影像。
可以使用 $R(minValue, MaxValue) 指定範圍值。例如，$R(1, 100)。
可以根據特定值指定範圍值。例如 values: [1,25,50,75,100]。在這種情況下，當手柄移動時，滑塊只會達到列出的離散值。
在任何時候，都可以透過呼叫滑塊例項的 setValue() 方法以程式方式設定滑塊的值，例如：sliderInstance.setValue(50);

這將產生以下結果：

列印頁面