[mootools]slideBox ver1.0をマウスホイールに対応させる

スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。
デフォルトだと矢印のクリックでスクロールするんだけど、
基本的なスクロール量は表示エリアの高さ(class-wrapper)と同じだから、マウスホイールで微調整したくなる場合もある。

使い方はファイル落とせば分かると思うので省略。

オプションは次の通り

1
2
3
4
5
6
7
8
9
10
11
12
13
14
options: {
    className:'slide',          // スライドするエリアのクラス名
    prevArrow:'-previous',      //前にスライドする矢印の接尾語
    nextArrow:'-next',      // 後にスライドする矢印の接尾語
    removeArrows:true,      //先頭と最後にスクロールしたとき矢印消すかどうか
    fadeArrows:false,           // 矢印にフェードエフェクトつけるかどうか
    startOpacity:0.5,           //フェードエフェクトがスタートした時の矢印の透明度
    endOpacity:1,           //フェードエフェクトが終わった時の矢印の透明度
    mouseoverBox:true,      //スライダー内にあるULとLI要素にクラスを追加するかどうか
    startClass:'normal',        // マウスアウト時に追加するクラス名
    endClass:'over',            //マウスエンター時に追加するクラス名
    speed:5,                //スクロールスピード(10:fast 1:slow)
    transition:Fx.Transitions.Quart.easeOut //スクロールのトランジション効果
},

カスタマイズ部分のソースのみ掲載してます。

※おかしな動作するかもしれません。のでご利用は自己責任で

ソース開いたら、適当な名前のメソッドをinitialize内に追加する

1
this.mouseEvent(element);

名前と同じメソッドを追加する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
mouseEvent: function(element){ 
        this.height = this.slider.getSize().y;     
        this.slideeFx = new Fx.Tween(this.slider,{
            duration:(1*100),
            transition:Fx.Transitions.linear,
            wait:false,
            speed:1,
            onComplete:function(){
                this.active = false;
                if(this.options.removeArrows) this.setArrows();
            }.bind(this)
        });
        this.wrapper.addEvent('mousewheel', function(e){
                e.stop();
                if (e.wheel < 0) this.mousewDown();
                else this.mousewUp();
        }.bind(this));
    },
&#91;/js&#93;
duration、transition、speedは設定無視の固定値でおkだと思う。勿論変更してもいい。
 
 
マウスイベント発生時に呼び出されるスクロールのメソッドを追加する。既存スクロールコピペして改変
&#91;js&#93;
mousewDown: function(){    
        this.now = this.slider.getStyle('top').toInt();    
        this.last = 0-(((this.height/this.wrapperH)-1)*this.wrapperH);
        if(this.now > this.last) {
            this.active = true;
            this.slideeFx.start('top',(this.slider.getStyle('top').toInt()-100)+'px');
        }
    },
    mousewUp: function() {
        this.now = this.slider.getStyle('top').toInt();
        this.last = 0-(((this.height/this.wrapperH)-1)*this.wrapperH);     
        if(this.now < 0) {
            this.active = true;
            if(this.now==0){
                return false;
            }else if((this.now+100) > 0){
                var num = ""+this.now;
                num =num.replace("-","");
                this.slideeFx.start('top',(this.now+eval(num))+'px');
            }else{
                this.slideeFx.start('top',(this.now+100)+'px');
            }
             
        }
    },

下方向の処理は面倒でやってない

スクロール処理はCSSのtop値の操作で動かしてるんだけども、ホイール追加すると上方向に動かした時0よりも大きい値になってしまう事があるので、
「現時点のtopの値+スクロールの固定値>0」で判定してtrueなら
現時点のtopの値(負数)から無理矢理マイナス外してstart()にセットする。
-16→16みたいにさくっと数値変換する方法ないのかなー

マウスホイールでスクロールする幅の値はお好みで。

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.