Mootools 1.2 チュートリアルスクロールバー (スライダー)_Mootools

WBOY

リリース： 2016-05-16 18:46:36

オリジナル

1059 人が閲覧しました

スライダーはこのおなじみのパターンに従っていますが、それでも何か特別なものがあります。
基本的な使い方
新しいスクロールバー(Slider)オブジェクトを作成します
まずHTMLとCSSから始めます。基本的な考え方は、スクロールバーの div を作成し、長い長方形 (長さはスクロールバーで何をするかによって異なります) と、スライダーとしての子要素を作成することです。
参照コード:

コードをコピーコードは次のとおりです:

CSS も非常にシンプルです。幅、高さ、背景色を設定するだけです。
参照コード:

コードをコピーコードは次のとおりです:

 
#slider { 
幅: 200px 
高さ: 20px 
背景色: #0099FF 
} 
#knob { 
幅: 20px 
高さ: 20px 
背景色: #993333 
} 

これで、新しいスクロールバーオブジェクトを作成できます。スクロールバーを初期化するには、まず関連する要素をいくつかの変数に割り当て、次に「new」を使用してスクロールバーの Slider オブジェクトを作成します。これは、以前に tween、morph、drag.move を作成したときと同じです。
リファレンスコード:

コードをコピーコードは次のとおりです:

// 要素を変数
var に割り当てますsliderObject = $ ('slider');
varknotObject = $('knob');
// 新しいスライダーオブジェクトを作成します
// まずスライダー要素を定義します
// slider element
var SliderObject = new Slider(sliderObject, knobObject, {
// オプションは次のとおりです
// これらのオプションについては後で詳しく説明します
range: [0, 10],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
// onchange イベントは、ステップ変更の値
// 現在のステップをパラメータとして渡します
onChange: function(step){
// onchange が配置されたときに実行されるコードをここに配置します
// can quote step
},
// ユーザーがスライダーをドラッグすると ontick イベントがトリガーされます
// 現在の位置 (親要素の位置を基準とした) を渡します
onTick: function(pos){
// スライダーの位置を調整するために必要です
// 以下で詳しく説明します
this.knob.setStyle('left', pos); >},
// ドラッグが停止するとトリガーされます
onComplete: function(step){
// 完了時に実行されるコード
// ステップを参照できます
}
});

スライダーオプション
スナップ: (デフォルトは false)、true または false の値を指定できます。これにより、スライダーが最小セル
オフセット: (デフォルトは 0) で移動するかどうかが決まります。これは、開始点に対するスライダーの位置です。これについて実験を行うことができます。
範囲: (デフォルトは false)、これは非常に便利なオプションです。数値範囲を設定すると、この数値とステップ番号に基づいて onchange イベントがトリガーされます。例: 設定した範囲が [0, 200] で、設定したステップ値が 10 の場合、各 onchange のステップ値は 20 になります。この範囲は、[-10,0] などの負の数値でもあります (以下の例)。
ホイール: (デフォルトは false)、このパラメータが true に設定されている場合、このスクロールバーはマウスホイールイベントを認識します。マウスホイールを使用する場合、マウスホイールイベントの動作が逆転しないように、範囲パラメーターを調整する必要がある場合があります (ここでも例を示します)。
ステップ: (デフォルトは 100)、デフォルト値の 100 はパーセンテージとして簡単に使用できるため、非常に便利です。もちろん、ステップは必要な数だけ設定できます (それでも問題ありません)。
モード: (デフォルトは「水平」)、このパラメータはスクロールバーが水平にスクロールするか垂直にスクロールするかを定義します。もちろん、水平スクロールから垂直スクロールに変換するには、いくつかの追加手順が必要です。
コールバックイベント
onChange: このイベントは、ステップが変更されるとトリガーされます。パラメータ「step」も渡します。以下の例で、いつトリガーされるかを確認できます。
onTick: このイベントは、コントロールポイントの位置が変化するとトリガーされます。パラメータ「position」も渡します。以下の例で、いつトリガーされるかを確認できます。
onComplete: このイベントは、コントロールポイントが解放されたときにトリガーされます。パラメータ「ステップ」を渡すスタブ。以下の例で、いつトリガーされるかを確認できます。
コード例
実際の動作を確認するための例を構築してみましょう。
.set() メソッド: ボタンのイベントを見て、.set() メソッドの使用方法を確認してください。使い方はとても簡単です。スライダーオブジェクトを呼び出し、.set を追加して、スクロールするステップ数を追加します。
参照コード:

コードをコピーコードは次のとおりです: