MooTools-スライダー
スライダーは、ノブやボタンをスライドさせている間のアクションを反映する機能です。要素、ハンドラー、オプション、およびコールバックイベントを定義しながら、独自のスライダーを作成できます。スライダーについて詳しく説明しましょう。
新しいスライダーの作成
まず、スライダーに適したHTML要素を選択する必要があります。基本的な考え方を考えると、divを使用すると子要素を作成できるため、div要素がスライダーに最適です。次に、これらのdivのCSSを設定して、div構造を完全なスライダーにする必要があります。ここで、親divはslider 子divは knob。
要素をSliderコンストラクターに渡すことにより、これらのdivをスライダーとして使用する必要があります。 sliderObject、および knobObject。スライダーを定義するための次の構文を見てください。
構文
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);スライダーオプションも定義する必要があります。
スライダーオプション
スライダーに使用されるいくつかのオプションについて説明しましょう。
スナップ
スナップ値は、真または偽の値にすることができます。これにより、スライダーに沿ってドラッグしたときにノブがステップにスナップするかどうかが決まります。デフォルトでは、falseです。
オフセット
これは、開始位置からのノブの相対オフセットです。これを試してみてください。デフォルトでは0です。
範囲
これは非常に便利なオプションです。ステップが割り込む数値の範囲を設定できます。たとえば、範囲が[0、200]で、ステップが10ある場合、ステップは20離れています。範囲には、[-10、0]などの負の数を含めることもできます。これは、スクロールを反転するときに非常に便利です。デフォルトでは、falseです。
ホイール
ホイールをtrueに設定すると、スクローラーはマウスホイールイベントを認識します。マウスホイールを使用する場合、マウスホイールイベントが反転して表示されないように範囲を調整する必要がある場合があります（これについては後で詳しく説明します）。
ステップ
デフォルトの100ステップは、パーセンテージとして簡単に使用できるため、非常に便利です。ただし、合理的な範囲内で（使用可能な）ステップをいくつでも設定できます。デフォルトでは100です。
モード
モードは、スライダーがそれ自体を垂直または水平として登録するかどうかを定義します。ただし、水平および垂直から変換するには、さらにいくつかの必要な手順があります。デフォルトでは、水平です。
コールバックイベント
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>出力
水平または垂直スライダーの茶色のノブをクリックしてドラッグすると、各アクションのステップ位置とイベント表示が表示されます。