[javascript]switchTab:仿騰訊首頁Tab欄切換js插件

　　騰訊首頁的每個新聞欄目都是一個tab選項卡切換，屬於延遲動作的：鼠標hover上去之后200毫秒才會切換，防止了因為瀏覽滑動導致的頁面上選項卡的頻繁切換。仿照這樣的效果，自己寫了一個js插件，實現了低版本瀏覽器IE7-8的兼容，沒有用庫，純js寫的。

　　難點的話就是如何實現延時動作，我想到的辦法是用setTimeOut函數，期間要遍歷Tabhead中的a節點進行綁定事件，寫了一個很逗的閉包向setTimeOut傳入循環變量。

 

　　核心js部分代碼如下：

/*
*   仿Tencent 選項卡延遲切換
*   參數：TabID，Tab標題的選中class，延遲時間
*
*/

    //為數組對象添加判斷子元素方法
    Object.prototype.isIn = function(item){
        var i = this.length; 
        while (i--) { 
            if ( item === this[i]) { 
              return true; 
            } 
        } 
        return false; 
    };
    Object.prototype.getPos = function(item){
        var i = this.length; 
        while (i--) { 
            if ( item === this[i]) { 
              return i; 
            } 
        } 
        return -1; 
    };
    //TabBar對象
    var TabBar = function(eId,className,delayTime){
        //防止漏寫new導致bug  js設計模式里推薦 感覺比較雞肋
        if(!(this instanceof TabBar)){
            return new TabBar(eId,className,delayTime);
        }
        //el:Tab組件對應的元素 
        //showNum:當前顯示的Tab子欄序號，從0開始
        //selectClass：Tab標題欄選中class樣式
        //delayTime: 鼠標延遲時間
        //hd,sub數組：tab頭元素和tabSub元素數組
        this.el = document.getElementById(eId||"tab");
        this.showNum = 0;
        this.selectClass = className || "selected";
        this.delayTime = delayTime || 200;
        this.hd = this.el.getElementsByTagName("div")[0].getElementsByTagName("a");
        this.sub = this.el.getElementsByTagName("div")[1].querySelectorAll(".sub_item");
        //類初始化最后執行bind函數
        this.bindListener();
    }
    
    TabBar.prototype.show = function() {
        //用於顯示當前ShowNum對應的Tab項
        this.sub[this.showNum].style.display ="block";
    };
    TabBar.prototype.hide = function() {
        //用於取消顯示當前ShowNum對應的Tab項
        (this.sub[this.showNum]).style.display ="none";
    };
    TabBar.prototype.bindListener = function() {
        //綁定hover事件 self局部變量傳遞this，addEventListener默認對象為window
        var self = this;
        if(this.el.addEventListener == undefined){
            //兼容IE7，8
            var i =0;
            for( i=0;i<this.hd.length;i++){
                this.hd[i].attachEvent("onmouseover",(function(pos){
                    return function (){
                        (self.hd[pos]).timer = setTimeout(function(){
                            self.switchTab(pos);
                        },self.delayTime);
                    }
                })(i));
                this.hd[i].attachEvent("onmouseout",(function(pos){
                    return function (){
                        clearTimeout( self.hd[pos].timer );
                    }
                })(i));
            }
        }
        else{
            //非IE7,8 addEventListener綁定
            this.el.addEventListener("mouseover",function(event){
                if( self.hd.isIn(event.target) ){
                    var pos = self.hd.getPos(event.target);
                    (self.hd[pos]).timer = setTimeout(function(){
                        self.switchTab(pos);
                    },self.delayTime);
                }
            });
            this.el.addEventListener("mouseout",function(event){
                if( self.hd.isIn(event.target) ){
                    var pos = self.hd.getPos(event.target);
                    clearTimeout( self.hd[pos].timer );
                }
            });
        }
    };
    TabBar.prototype.switchTab = function(pos){
        //選項卡切換函數 參數：pos，當前Hover的子欄序號，從0開始
        if( pos !== this.showNum ){
            this.hd[this.showNum].className = "";
            this.hd[pos].className=this.selectClass;
            this.hide();
            this.showNum = pos;
            this.show();
        }
    };
    //Tab實例化
    var LeeTab =new TabBar("tab");

 

　　demo地址：Tab切換演示

 

　　恩，就是這樣。