Jq-滚动条插件写法(二)

接着上次的未完的部分。

接下是对滚轮的支持。

滚轮大概可以分为这么两类：

1. Firefox

Firefox 需要添加 'DOMMouseScroll' 事件支持，并取值是 使用detail 为正负30。

2. IE,Opera,Safari,Chrome

而这四类，则直接在 window.onmousewheel = document.onmousewheel = $(dom).onmousewheel = fn

取值是： 正负120，

虽然这两个取值是不一样的，但含义是一样的，正为向上，负为向下。

所以：

mousewheel: function(fun){
    return this.each(function(){
        var that = this;
            that.delta = 0; //滚动方向
        
        if($.browser.msie || $.browser.safari){ //IE Safari 
            that.onmousewheel = function(){
                that.delta = event.wheelDelta; // IE,Opera,Safari,Chrome 使用wheelDelta 只取 +-120
                event.returnValue = false;
                fun && fun.call(that); //    
            }
        } else { //Firefox
            that.addEventListener('DOMMouseScroll', function(e){
                that.delta = e.detail > 0 ? -1 : 1; // Firefox 使用 detail 只取 +-3
                e.preventDefault();
                fun && fun.call(that);
            }, false);
        }
    });
    
}

然后根据，上面总结的特性，添加代码：

$(that).mousewheel(function(){
    if(this.delta > 0){ //如果大于零，则向上，反之向下。
        currentTop -= 15;
    } else {
        currentTop += 15;
    }
    setScrollTop();
});

然后，添加对上下按钮的支持：

View Code
//向上按钮绑定事件
jKBarTop.bind('mousedown', function(e){
    that.setBarTop('up');
    
    $(document).mouseup(function(){
        $(document).unbind();
        clearTimeout(scrollTopTimer);
        scrollTopSpeed = 0;
    });
});

//向下按钮绑定事件
jKBarBot.bind('mousedown', function(e){
    that.setBarTop('bot');
    
    $(document).mouseup(function(){
        $(document).unbind();
        clearTimeout(scrollTopTimer);
        scrollTopSpeed = 0;
    });
});

//按钮设置高度方法
that.setBarTop = function(scrollDir){
    if(scrollDir == 'up'){
        currentTop -= 15;
    } else {
        currentTop += 15;
    }
    setScrollTop();
    
    scrollTopSpeed += 2;
    var t = 500 - scrollTopSpeed * 50;
    t <=0 && (t = 0);
    
    scrollTopTimer = setTimeout(function(){
        that.setBarTop(scrollDir);
    }, t);
}

基本代码块就这么多，然后是添加风格修改，

由于css属性选择器覆盖的特性，父类可以覆盖子类的权重。所以提供其它两种风格：

/* 简单 */
.jkscroll-wrap .jkscroll-simple{width:12px;background:#f2f2f2;border-left:1px solid #dadada;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-top,.jkscroll-wrap .jkscroll-simple .jkscroll-bar-bot{display:none;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-mid{top:0;right:-2px;background:#c0c0c0;border:none 0;}
.jkscroll-wrap .jkscroll-simple .hover{background:#909090;}
/* blue */
.jkscroll-wrap .jkscroll-gray{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y right 0 #edf7fa;}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-top,.jkscroll-wrap .jkscroll-gray .jkscroll-bar-bot{background:url(http://app.soche8.com/show/jscoll/s_bg.gif);}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-mid{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y -45px 0;border:1px solid #BCBCBC;}

由此，在调用时直接可以对样式进行操作，添加 .jkscroll-simple, .jkscroll-gray 两个样式，即可更换风格。

var defaults = {
    pattern: 'blue', //默认风格
};
var opts = $.extend(defaults, options);

//风格设定
if(opts.pattern == 'jkscroll-simple'){
    jkBar.addClass('jkscroll-simple');
    jkBarBtnWidth = 0;
} else if(opts.pattern == 'jkscroll-gray'){
    jkBar.addClass('jkscroll-gray');
}

在调用时，提供三种风格的支持：

$('.jkscroll-wrap').jikeyScrollerBar({
    pattern: 'jkscroll-simple' //简版
    //pattern: 'jkscroll-gray' //灰色
    //pattern: 'jkscroll-blue' //蓝色
});

由于想更自动化一点，外部的包装层也使用jquery提供的方向进行动态的添加：

var jkScrollWrap = this.wrapInner('<div class="jkscroll-cont"></div>'),
    jkScrollCont = jkScrollWrap.append('<div class="jkscroll-bar"><div class="jkscroll-bar-top"></div><div class="jkscroll-bar-mid"></div><div class="jkscroll-bar-bot"></div></div>');

这样的话，只要对内容高度进行限定，外边的滚动条，从DOM结构到js控制都是通过插件来实现，这样增加了插件的灵活性。

那最终的代码如下：

posted @ 2011-12-05 16:16  豪情  阅读(3113)  评论(1)  编辑  收藏  举报