MooTools-スライダー

スライダーは、ノブまたは任意のボタンをスライドさせている間のアクションを反映する機能です。要素、ハンドラー、オプション、およびコールバックイベントを定義しながら、独自のスライダーを作成できます。スライダーについて詳しく説明します。

新しいスライダーを作成する

まず、スライダーに適したHTML要素を選択する必要があります。基本的な考え方を考慮しながら、div要素を使用すると子要素を作成できるため、div要素はスライダーに最適です。ここで、これらのdivにCSSを設定して、div構造を完璧なスライダーにする必要があります。ここでは、親divは slider 用であり、子divは knob 用です。

次に、スライダーコンストラクターに要素を sliderObject および knobObject として渡すことにより、これらのdivをスライダーとして使用する必要があります。スライダーを定義するための次の構文を見てください。

構文

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

スライダーオプションも定義する必要があります。

スライダーオプション

スライダーに使用されるいくつかのオプションについて説明します。

Snap

スナップ値は、trueまたはfalseの値にすることができます。これは、スライダーに沿ってドラッグされたときにノブがステップにスナップするかどうかを決定します。デフォルトでは、falseです。

オフセット

これは、開始位置からのノブの相対オフセットです。これを試してみてください。デフォルトでは、0です。

範囲

これは非常に便利なオプションです。ステップが割り込む番号の範囲を設定できます。たとえば、範囲が[0、200]で、10のステップがある場合、ステップは20離れています。範囲には、[-10、0]などの負の数を含めることもできます。これは、スクロールを反転させるときに非常に便利です。デフォルトでは、falseです。

ホイール

wheelをtrueに設定すると、スクローラーはmousewheelイベントを認識します。マウスホイールを使用する場合、マウスホイールイベントが反転して表示されないように範囲を調整する必要があります（これについては後で詳しく説明します）。

ステップ

デフォルトの100ステップは、パーセンテージで使いやすいため、非常に便利です。ただし、理にかなった範囲で（使用可能な）ステップをいくつでも設定できます。デフォルトでは、100です。

Mode

モードは、スライダーがそれ自体を垂直または水平として登録するかどうかを定義します。ただし、水平および垂直から変換するために必要な手順がいくつかあります。デフォルトでは、水平です。

コールバックイベント

Sliderが提供する3つの重要なコールバックイベントがあります。

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>

出力

水平または垂直スライダーの茶色のノブをクリックしてドラッグすると、各アクションのステップ位置とイベント表示が表示されます。

Mootools-sliders

目次