ホームページ >ウェブフロントエンド >jsチュートリアル >Mootools 1.2 チュートリアル スクロール バー (スライダー)_Mootools
Mootools 1.2 チュートリアル スクロール バー (スライダー)_Mootools
- WBOYオリジナル
- 2016-05-16 18:46:361073ブラウズ
スライダーはこのおなじみのパターンに従っていますが、それでも何か特別なものがあります。
基本的な使い方
新しいスクロールバー(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 を追加して、スクロールするステップ数を追加します。
参照コード:
コードをコピー コードは次のとおりです:
window.addEvent ('domready ', function() {
var SliderObject = new Slider('slider', 'knob', {
// オプション
範囲: [0, 10],
スナップ: false ,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
// コールバック イベント
onChange: function(step){
$( 'change').highlight('#F3F825');
$('steps_number').set('html', step);
},
onTick: function(pos){
$('tick').highlight('#F3F825');
$('knob_pos').set('html', pos);
// この行は必須です (左側を使用します)水平スクロール)
this.knob.setStyle('left', pos);
},
onComplete: function(step){
$('complete').highlight('#F3F825' )
$('steps_complete_number').set('html', step);
this.set(step)
}
}); sliderv', 'knobv', {
範囲: [-10, 0]、
スナップ: true、
ステップ: 10、
オフセット: 0、
ホイール: true、
mode: 'vertical',
onTick: function(pos){
// この行は必須です (垂直スクロールには top を使用します)
this.knob.setStyle('top', pos); 🎜>} ,
onChange: function(step){
$('stepsV_number').set('html', step*-1);
}
}); / 垂直に設定します スクロールは 0 から開始します
// それ以外の場合は上から開始します
SliderObjectV.set(0)
// スクロール バーを 7 から開始するように設定します
$('set_knob' ).addEvent(' click', function(){ SliderObject.set(7)});
onChange
現在のステップを渡します: onTick
ノブの位置を渡します: onComplete
現在のステップを渡します:
垂直スクロールの例では、単に「」を入れているわけではないことに注意してください。 mode " が "vertical" に変更され、onTick イベントの .setStyle(); メソッドの "left" 属性も "top" 属性に変更されました。また、「範囲」を -10 から始まり 0 まで設定する方法にも注目してください。次に、onChange イベントで現在の数値を表示します。この値に位置の逆である -1 を掛けます。これにより、2 つのことが達成されます。1 つは、この値を 10 から 0 に変更できます (0 が一番下になります)。ただし、これにより範囲が 10 から 0 に設定され、マウス ホイール イベントが逆になる可能性があります。これが 2 番目の理由です。マウス ホイールは、制御している方向ではなく、値を読み取ります。そのため、マウス ホイールにスクロールバーを正しく読み取り、値を下の 0 から開始させる唯一の方法は、これを少しずつ行うことです。変化します。
注: onTick イベントでの「top」と「left」の使用については、これが MooTools の「ルール」であるかどうかはわかりません。これは私がそれらを正しく動作させるための 1 つの方法にすぎません。他の明確な説明を聞きたいです。
さらに詳しく
前と同様、ドキュメントの スライダー セクション を参照してください。
開始するために必要なものがすべて入った zip パッケージをダウンロードします
MooTools 1.2 のコア ライブラリと拡張ライブラリに加え、外部 JavaScript ファイル、単純な HTML ページ、CSS ファイル、および上記の例が含まれています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。