多種tabs切換的應用

tabsMode 主要總結兩種tabs切換的實現方式：JavaScript / jQuery；並最後實現一個jQuery的組件化開發

總體設計

整個tab設計可設計為一個大盒子(div)裏麵嵌套著兩個小盒子(div)
上麵的盒子(div)，主要放置導航欄的，類似於分類的
上盒子我們主要設計為由ul和若幹個li標簽，設計成一個導航欄
下麵的盒子（div），主要是放置每個分類下麵的主要內容
在下盒子裏麵，又增加了跟（li）數量相等的更小的盒子（div），用來放置相應的主題主體內容

    <div  >
        <ul  >
            <li ><a href="#">公告</a></li>
            <li><a href="#">規則</a></li>
            <li><a href="#">論壇</a></li>
            <li><a href="#">安全</a></li>
            <li><a href="#">公益</a></li>
        </ul>

        <div  >
            <div  >ct1</div>
            <div  >ct2</div>
            <div  >ct3</div>
            <div  >ct4</div>
            <div  >ct5</div>
        </div>
    </div>

JavaScript開發模式

主要代碼，如下：

    function $(id) {
        return typeof id == "string"?document.getElementById(id):id;
    }
    window.onload = function () {
        var titleName = $("tab-title").getElementsByTagName("li");
        var tabContent = $("tab-content").getElementsByTagName("div");
        if(titleName.length != tabContent.length){
            return;
        }
        for(var i = 0;i < titleName.length;i++){
            titleName[i].id = i;
            titleName[i].onmouseover = function () {
                for(var j = 0;j<titleName.length;j++){
                    titleName[j].className = "";
                    tabContent[j].style.display = "none";
                }
                this.className = "select";
                tabContent[this.id].style.display = "block";
            }
        }
    } ;

1、判斷一下ul li的數量和tab-ct的數量是否相等
2、根據我們的鼠標觸發的事件（mouseover，click。。。）來進行相應的操作
3、通過兩個嵌套的遍曆循環，來實現tab-title和tab-content兩部分之間操作同步
4、因為tab-content部分設計的時候，每次隻顯示相對應位置的tab-ct，所以在頁麵構造的時候，預先設計了隻顯示第一個tab-ct，其餘的都隱藏
5、當我們的鼠標事件移動到第幾個位置的時候，分別給相應的title添加我們想要的樣式，並且顯示相應的content內容

jQuery開發模式

主要代碼如下：
```
$(document).ready(function () {
var titleName = $(".tab-title li");
var tabContent = $(".tab-content div");

if(titleName.length != tabContent.length){
    return;
}
titleName.mouseover(function () {
    var index = $(this).index();
    $(this).addClass("select").siblings().removeClass("select");
    tabContent.eq(index).show().siblings().hide();
});
});
```
1、判斷一下ul li的數量和tab-ct的數量是否相等
2、根據我們的鼠標觸發的事件（mouseover，click。。。）來進行相應的操作
3、jquery通過觸發事件來進行相應的操作，稍微比JavaScript簡潔一點
4、因為tab-content部分設計的時候，每次隻顯示相對應位置的tab-ct，所以在頁麵構造的時候，預先設計了隻顯示第一個tab-ct，其餘的都隱藏
5、當我們的鼠標事件移動到第幾個位置的時候，分別給相應的title添加我們想要的樣式，並且顯示相應的content內容

實現一個jQuery的組件化開發

因為實現組件化開發，需要把公共部分提取出來，以參數配置的形式進行展示

頁麵部分

<div  data-config='{
                            "triggerType":"mouseover",
                            "effect":"fade",
                            "invoke":1,
                            "auto":2000}'>
    <ul >
        <li ><a href="javascript:void(0)">新聞</a></li>
        <li><a href="#">電影</a></li>
        <li><a href="#">娛樂</a></li>
        <li><a href="#">科技</a></li>
    </ul>

    <div >
        <div >
            A
        </div>
        <div >
            B
        </div>
        <div >
            C
        </div>
        <div >
            D
        </div>
    </div>
</div>

頁麵部分需要一個調用組件化js的函數

<script type="text/javascript">
$(function () {
var tab1 = new Tab($(".js-tab").eq(0));
});
</script>

js組件化部分是通過閉包的形式來實現的
代碼如下：

;(function () {
var Tab = function (tab) {
    var _this_ = this;

    //保存單個tab組件
    this.tab = tab;

    //默認配置參數
    this.config = {
        //用來定義鼠標的觸發類型，是click還是mouseover
        "triggerType":"click",
        //用來定義內容切換效果，是直接切換，還是淡入淡出切換效果
        "effect":"fade",
        //默認展示第幾個Tab
        "invoke":1,
        //用來定義tab是否自動切換，當製定了時間間隔，就表示自動切換，並且切換時間為指定時間間隔
        "auto":false
    };
    //如果配置參數存在，就擴展換掉默認的配置參數
    if(this.getConfig()){
        $.extend(this.config,this.getConfig());
    }

    //保存tab標簽列表，對應的內嵌列表
    this.tabItems = this.tab.find("ul.tab-nav li");
    this.contentItems = this.tab.find("div.content-wrap div.content-item");

    //保存配置參數
    var config = this.config;

    if(config.triggerType === "click"){
        this.tabItems.bind(config.triggerType,function () {
            _this_.invoke($(this));
        });
    }else if(config.triggerType === "mouseover" || config.triggerType != "click"){
        this.tabItems.bind("mouseover",function (event) {
            var self = $(this);
            this.timer = window.setTimeout(function () {
                _this_.invoke(self);
            },300);
            event.stopPropagation();
        }).bind("mouseout",function (event) {
            window.clearTimeout(this.timer);
            event.stopPropagation();
        })
    }

    //自動切換功能，當配置了時間，我們就根據時間間隔執行自動切換
    if(config.auto){
        //定義一個全局的定時器
        this.timer = null;
        //計數器
        this.loop = 0;
        this.autoPlay();

        this.tab.hover(function () {
            window.clearInterval(_this_.timer);
        },function () {
            _this_.autoPlay();
        });
    }

    //設置默認顯示第幾個tab
    if(config.invoke > 1){
        this.invoke(this.tabItems.eq(config.invoke - 1));
    }

};

Tab.prototype = {
    //自動間隔時間切換
    autoPlay:function () {
      var _this_ = this;
      var tabItems = this.tabItems;//臨時保存tab列表
      var tabLength = tabItems.length;//tab的個數
      var config = this.config;

      this.timer = window.setInterval(function () {
          _this_.loop++;
          if(_this_.loop >= tabLength){
              _this_.loop = 0;
          }

          tabItems.eq(_this_.loop).trigger(config.triggerType);
      },config.auto);
    },

    //事件驅動函數
    invoke:function (currentTab) {
        var _this_ = this;
        /***
         * 要執行Tab的選中狀態，當前選中的加上actived（標記為白底）
         * 切換對應的tab內容，要根據配置參數的effect是default還是fade
         **/
        var index = currentTab.index();
        //tab選中狀態
        currentTab.addClass("actived").siblings().removeClass("actived");
        //切換對應的內容區域
        var effect = this.config.effect;
        var contItems = this.contentItems;
        if(effect === "default"){
            contItems.eq(index).addClass("current").siblings().removeClass("current");
        }else if(effect === "fade"){
            contItems.eq(index).fadeIn().siblings().fadeOut();
        }

        //注意：如果配置了自動切換，記得把當前的loop的值設置成當前的tab的index
        if(this.config.auto){
            this.loop = index;
        }
    },

    //獲取配置參數
    getConfig:function () {
        //拿一下tab elem節點上的data-config
        var config = this.tab.attr("data-config");
        // console.log(config);

        //確保有配置參數
        if(config && config!= ""){
            return $.parseJSON(config);
        }else {
            return null;
        }
    }
};
window.Tab = Tab;
})(jQuery);

1、jquery原型的知識
2、阻止冒泡事件發生

代碼見github地址：https://github.com/qiuxiaoxiao/tabsMode

最後更新：2017-08-13 22:38:24

多種tabs切換的應用

tabsMode 主要總結兩種tabs切換的實現方式：JavaScript / jQuery；並最後實現一個jQuery的組件化開發

總體設計

JavaScript開發模式

jQuery開發模式

實現一個jQuery的組件化開發

上一篇：時間序列數據的存儲和計算 - 開源時序數據庫解析（三）

下一篇：匯新雲為何給出嚴格的入駐審核標準？

相關內容

熱門內容

最新內容

多種tabs切換的應用

tabsMode 主要總結兩種tabs切換的實現方式：JavaScript / jQuery；並最後實現一個jQuery的組件化開發

總體設計

JavaScript開發模式

jQuery開發模式

實現一個jQuery的組件化開發

上一篇： 時間序列數據的存儲和計算 - 開源時序數據庫解析（三）

下一篇： 匯新雲為何給出嚴格的入駐審核標準？

相關內容

熱門內容

最新內容

上一篇：時間序列數據的存儲和計算 - 開源時序數據庫解析（三）

下一篇：匯新雲為何給出嚴格的入駐審核標準？