Class: Slider

2つの要素(ノブとコンテナ)からスライダーを生成します。

注意点:

構文:

var mySlider = new Slider(element, knob[, options]);

引数:

  1. element - (要素) スライドさせる要素。
  2. knob - (要素) スライドのハンドラとなるノブ要素。
  3. options - (オブジェクト) Sliderをカスタマイズするオプションオブジェクト。

オプション:

  1. snap - (真偽値: 初期値=false) ノブを一番近い値にスナップさせたい場合にはtrueに設定。
  2. offset - (: 初期値=0) スライド開始時点のノブの相対的なオフセット。
  3. range - (いろいろ: 初期値=false) 数の配列か、false。スライダーが使用する最大値と最小値。
  4. wheel - (真偽値: 初期値=false) マウスホイールでノブを動かしたい場合はtrue。
  5. steps - (: 初期値=100) スライダーが動く時のステップ数。
  6. mode - (文字列: 初期値=horizontal) スライドのタイプ。'horizontal'か'vertical'。

注意点:

  • Rangeオプションは数の配列だけを受け付けます。正負の数を使用できます。

Sliderイベント: change

  • (関数) スライダーの値が代わったときに発生します。

表記:

onChange(step)

引数:

  1. step - () スライダーの現在値。

Sliderイベント: onComplete

  • (関数) ドラッグを終了したときに発生します。

表記:

onComplete(step)

引数:

  1. step - (文字列) スライダーの現在値を示す文字列。

Sliderイベント: tick

  • (関数) ノブをドラッグしたときに発生します。このイベントはtickの挙動を上書きできます。

表記:

onTick(pos)

引数:

  1. pos - () スライダーの現在値。

注意点:

  • スライダーはノブの場所をスタイリングするときに'tick'イベントを使うようになっています。

戻り値:

  • (オブジェクト) 新しいSliderインスタンス。

例:

var mySlider = new Slider('myElement', 'myKnob', {

    range: [-50, 50],
    wheel: true,
    snap: true,
    onStart: function(){

        this.borderFx = this.borderFx || this.element.tween('border').start('#ccc');
    },
    onTick: function(pos){

        this.element.setStyle('border-color', '#f00');
        this.knob.setStyle(this.property, pos);
    },
    onComplete: function(){

        this.element.tween('border').start('#000');
    }

});

Sliderメソッド: set

スライダーを指定した位置に動かします。

構文:

mySlider.set(step);

引数:

  1. step - () スライダーの移動する位置。

戻り値:

  • (オブジェクト) このSliderインスタンス。

例:

var mySlider = new Slider('myElement', 'myKnob');
mySlider.set(0);

var myPeriodical = (function(){
    if(this.step == this.options.steps) $clear(myPeriodical);
        this.set(this.step++);

}).periodical(1000, mySlider);

注意点:

  • Stepは自動的に0からstepsオプションの値の間に制限されます。

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳(ちょっと改変)しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る