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 函式更改時呼叫。呼叫的函式獲取滑塊值作為其引數。

滑塊示例

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

這將產生以下結果:

廣告