仿照jquery的方式实现的tabs和focus

时间：2011-05-31 来源：留痕

自己没事的时候写的小玩意，没有做过什么优化，很多地方不是很理想，期待有高人指点。

(function(W){
    var ui=W.ui=function(json){
        return ui.fn.init(json);
    }
    ui.fn=ui.prototype={
        init:function(json){
            var opt={
                type:json.type || 'tabs',
                id:json.id || 'tab',
                contid:json.contid || 'tabcont',
                maxnum:json.maxnum,
                curclass:json.curclass || 'curr',
                oent:json.oent || 'mouseover',
                speed:json.speed || 2000
            }
            if(opt.type=='focus') return this.focus(opt);
            else if(opt.type=='tabs') return this.tab(opt);
        },
        $:function(s){
            return document.getElementById(s);
        },
        addEvent:function(obj,type,fn){
            if(obj.addEventListener){
                obj.addEventListener(type,fn,false);
            }
            else if(obj.attachEvent){
                obj["e"+type+fn]=fn;
                obj.attachEvent("on"+type,function(){ obj["e"+type+fn]()});
            }
        },
        tab:function(opt){
            var _this=this;
            for(var i=0; i<opt.maxnum; i++){
                var oj=this.$(opt.id+i);
                oj.j=i;
                this.addEvent(oj,opt.oent,function(){
                    _this.show(opt,this.j);
                })
            }
        },
        show:function(opt,j){
            for(var i=0; i<opt.maxnum; i++){
                this.$(opt.id+i).className=(i==j?this.$(opt.id+i).className+' '+opt.curclass:this.$(opt.id+i).className.replace(new RegExp(opt.curclass,'gi'),''));
                this.$(opt.contid+i).style.display=(i==j?'':'none');
            }
        },
        focus:function(opt){
            var reset;
            var _this=this;
            var bpos=0;
            var curnum=1;
            function start(){
                reset=setInterval(function(){
                    if(curnum>=opt.maxnum) curnum=0;
                    bpos=curnum;
                    _this.show(opt,curnum);
                    curnum++;
                },opt.speed)
            }
            start();
            for(var i=0; i<opt.maxnum; i++){
                var oj=this.$(opt.id+i);
                oj.j=i;
                switch(opt.oent){
                    case 'click':
                    this.addEvent(this.$(opt.id+i),'click',function(){
                        _this.show(opt,this.j);
                        curnum=this.j;
                    })
                    this.addEvent(this.$(opt.id+i),'mouseover',function(){
                        clearInterval(reset);
                    })
                    break;
                    default:
                    this.addEvent(this.$(opt.id+i),'mouseover',function(){
                        clearInterval(reset);
                        _this.show(opt,this.j);
                        curnum=this.j;
                    })
                }
                this.addEvent(this.$(opt.id+i),'mouseout',function(){
                    start();
                })
                this.addEvent(this.$(opt.contid+i),'mouseover',function(){
                    clearInterval(reset);
                })
                this.addEvent(this.$(opt.contid+i),'mouseout',function(){
                    start();
                })
            }
        }
    }
    ui.fn.init.prototype=ui.fn;
})(window);