MooTools - 滑塊

滑塊是一種功能，它在滑動旋鈕或任何按鈕時反映一個動作。您可以透過定義元素、處理程式、選項和回撥事件來建立自己的滑塊。讓我們進一步討論滑塊。

建立新的滑塊

我們首先必須為滑塊選擇合適的 HTML 元素。考慮到基本思路，div 元素最適合滑塊，因為使用 div，我們可以建立子元素。現在我們必須為這些 div 設定 CSS，以使 div 結構成為一個完美的滑塊。這裡，父 div 用於**滑塊**，子 div 用於**旋鈕**。

現在，我們必須透過將元素傳遞給 Slider 建構函式作為**sliderObject** 和**knobObject** 來將這些 div 用作滑塊。請檢視以下定義滑塊的語法。

語法

var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);

我們還必須定義滑塊選項。

滑塊選項

讓我們討論一些用於滑塊的選項。

Snap（捕捉）

Snap 值可以是 true 或 false。這決定了旋鈕在沿滑塊拖動時是否捕捉到步長。預設情況下為 false。

Offset（偏移量）

這是旋鈕相對於起始位置的相對偏移量。嘗試一下這個選項。預設情況下為 0。

Range（範圍）

這是一個非常有用的選項。您可以設定一個數字範圍，步長將被分成這些範圍。例如，如果您的範圍是 [0, 200] 並且您有 10 個步長，則您的步長將相隔 20。範圍也可以包含負數，例如 [-10, 0]，這在反轉滾動時非常有用。預設情況下為 false。

Wheel（滾輪）

將 wheel 設定為 true，滑塊將識別滑鼠滾輪事件。使用滑鼠滾輪時，您可能需要調整範圍以確保滑鼠滾輪事件不會出現反轉（稍後會詳細介紹）。

Steps（步長）

預設的 100 個步長非常有用，因為它易於用百分比表示。但是，您可以在合理範圍內設定任意數量的步長。預設情況下為 100。

Mode（模式）

Mode 將定義滑塊是垂直註冊還是水平註冊。但是，從水平轉換為垂直還需要一些額外的步驟。預設情況下為水平。

回撥事件

滑塊提供了三個重要的回撥事件。

onChange

當前步長的任何更改都會觸發事件的執行。檢視下面給出的示例以瞭解何時執行。

onTick

控制代碼位置的任何更改都會觸發此事件的執行。檢視下面給出的示例以瞭解此事件何時執行。

onComplete

只要鬆開控制代碼，此事件就會執行。檢視下面給出的示例以瞭解何時執行。

示例

以下示例說明了水平和垂直滑塊以及事件指示器。請檢視以下程式碼。

<!DOCTYPE html>
<html>

   <head>
      <style "text/css">
         #slider {
            width: 200px;
            height: 20px;
            background-color: #0099FF;
         }
         #knob {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #sliderv {
            width: 20px;
            height: 200px;
            background-color: #0099FF;
         }
         #knobv {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #change{
            background-color: burlywood;
            border: 2px solid black;
            width: 200px;
         }
         #complete{
            background-color: burlywood;
            border: 2px solid black;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            
            var SliderObject = new Slider('slider', 'knob', {
               //options
               range: [0, 10],
               snap: false,
               steps: 10,
               offset: 0,
               wheel: true,
               mode: 'horizontal',
               
               //callback events
               onChange: function(step){
                  $('change').highlight('#F3F825');
                  $('steps_number').set('html', step);
               },
               
               onTick: function(pos){
                  $('tick').highlight('#F3F825');
                  $('knob_pos').set('html', pos);
                  
                  //this line is very necessary (left with horizontal)
                  this.knob.setStyle('left', pos);
               },
               
               onComplete: function(step){
                  $('complete').highlight('#F3F825')
                  $('steps_complete_number').set('html', step);
                  this.set(step);
               }
            });
            
            var SliderObjectV = new Slider('sliderv', 'knobv', {
               range: [-10, 0],
               snap: true,
               steps: 10,
               offset: 0,
               wheel: true,
               mode: 'vertical',
               onChange: function(step){
                  $('stepsV_number').set('html', step*-1);
               }
            });
            
            //sets the vertical one to start at 0
            //without this it would start at the top
            SliderObjectV.set(0);
            
            //sets the slider to step 7
            $('set_knob').addEvent('click', function(){ SliderObject.set(7)});
         });
      </script>
   </head>
   
   <body>
      <div id = "slider">
         <div id = "knob"></div>
      </div><br/><br/>
      
      <div id = "sliderv">
         <div id = "knobv"></div>
      </div><br/>
      
      <span id = "stepsV_number"></span> <br/>
      
      <div id = "change" class = "indicator">
         <strong>onChange</strong><br/>
         Passes the step you are on: <span id = "steps_number"></span>
      </div></br/>
      
      <div id = "complete" class = "indicator">
         <strong>onComplete</strong><br />
         passes the current step: <span id = "steps_complete_number"></span>
      </div>
      
   </body>
</html>

輸出

點選水平或垂直滑塊上的棕色旋鈕，然後拖動它，您將找到每個動作的步長位置和事件指示。

列印頁面