可輪播滾動的Tab選項卡

前段時間有試着搭建個後臺主題ui框架，有用到可支持滾動的Tab選項卡，模仿着H+後臺主題ui框架中的代碼造輪子改造了下，惋惜代碼在公司，不能把代碼外發出來(感受這樣被限制了不少，對於這樣的公司沒辦法，只能吐槽下這樣的制度)，這樣在公司造的輪子只能在家再敲一遍了。

本次主題講的是實現一個可輪播滾動的Tab選項卡列表，本身封裝成了一個小輪子，有什麼不對的地方，但願各位大師多多指出，給予一個進步的空間。

首先把HTML代碼貼出來

<div class="content-tabs">
         <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"><<</i></button>
        <nav class="page-tabs J_menuTabs">
           <div class="page-tabs-content">
           </div>
        </nav>
        <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward">>></i></button>
</div>

CSS部分：

*{padding: 0;margin: 0;}
           .content-tabs {
                position: relative;
                height: 42px;
                background: #fafafa;
                line-height: 40px
            }
            .page-tabs a {
                display: block;
                float: left;
                border-right: solid 1px #eee;
                padding: 0 15px;
                color: #fff;
                background: #EC0D35;
                text-decoration: none;
            }
            nav.page-tabs {
                margin-left: 40px;
                width: 100000px;
                height: 40px;
                overflow: hidden
            }
            nav.page-tabs .page-tabs-content {
                float: left
            }
            .content-tabs button {
                background: #fff;
                border: 0;
                height: 40px;
                width: 40px;
                outline: 0;
                cursor: pointer;
            }
            .content-tabs .roll-nav,.page-tabs-list {
                position: absolute;
                width: 40px;
                height: 40px;
                text-align: center;
                color: #999;
                z-index: 2;
                top: 0
            }
            .content-tabs .roll-left {
                left: 0;
                border-right: solid 1px #eee
            }
            .content-tabs .roll-right {
                right: 0;
                border-left: solid 1px #eee
            }
            .page-tabs a.active {
                background: #2f4050;
                color: #a7b1c2
            }

在此循環出30個選項卡展現其效果：

for(var i=0; i<30; i++){
    $('.page-tabs-content').append("<a href='javascript:;' class='J_menuTab'>Tab"+(i+1)+"</a>");
}
$('.page-tabs-content').children().first().addClass('active');

頁面效果以下：

本身造的輪子代碼以下：

;(function($){
    var TabElement = function(option){
        this.option = option;
    }
    TabElement.prototype = {
        'f': function(l){
            var k = 0;
            $(l).each(function() {
                k += $(this).outerWidth(true);
            });
            return k;
        },
        'prevTab': function(){
            var that = this;
            var o = Math.abs(parseInt($(that.option.tab_list).css("margin-left")));
            var l = that.f($(that.option.content_tab).children().not(that.option.nav_tab));
            var k = $(that.option.content_tab).outerWidth(true) - l;
            var p = 0;
            if ($(that.option.tab_list).width() < k) {
                return false
            } else {
                var m = $(that.option.tab_list).children().first();
                var n = 0;
                while ((n + $(m).outerWidth(true)) <= o) {
                    n += $(m).outerWidth(true);
                    m = $(m).next()
                }
                n = 0;
                if (that.f($(m).prevAll()) > k) {
                    while ((n + $(m).outerWidth(true)) < (k) && m.length > 0) {
                        n += $(m).outerWidth(true);
                        m = $(m).prev()
                    }
                    p = that.f($(m).prevAll())
                }
            }
            $(that.option.tab_list).animate({
                marginLeft: 0 - p + "px"
            }, "fast")
        },
        'nextTab': function(){
            var that = this;
            var o = Math.abs(parseInt($(that.option.tab_list).css("margin-left")));
            var l = that.f($(that.option.content_tab).children().not(that.option.nav_tab));
            var k = $(that.option.content_tab).outerWidth(true) - l;
            var p = 0;
            if ($(that.option.tab_list).width() < k) {
                return false
            } else {
                var m = $(that.option.tab_list).children().first();
                var n = 0;
                while ((n + $(m).outerWidth(true)) <= o) {
                    n += $(m).outerWidth(true);
                    m = $(m).next()
                }
                n = 0;
                while ((n + $(m).outerWidth(true)) < (k) && m.length > 0) {
                    n += $(m).outerWidth(true);
                    m = $(m).next()
                }
                p = that.f($(m).prevAll());
                if (p > 0) {
                    $(that.option.tab_list).animate({
                        marginLeft: 0 - p + "px"
                    }, "fast")
                }
            }
        },
        'goTab': function(n){
            var that = this;
            var o = that.f($(n).prevAll()), q = that.f($(n).nextAll());
            var l = that.f($(that.option.content_tab).children().not(that.option.nav_tab));
            var k = $(that.option.content_tab).outerWidth(true) - l;
            var p = 0;
            if ($(that.option.tab_list).outerWidth() < k) {
                p = 0
            } else {
                if (q <= (k - $(n).outerWidth(true) - $(n).next().outerWidth(true))) {
                    if ((k - $(n).next().outerWidth(true)) > q) {
                        p = o;
                        var m = n;
                        while ((p - $(m).outerWidth()) > ($(that.option.tab_list).outerWidth() - k)) {
                            p -= $(m).prev().outerWidth();
                            m = $(m).prev()
                        }
                    }
                } else {
                    if (o > (k - $(n).outerWidth(true) - $(n).prev().outerWidth(true))) {
                        p = o - $(n).prev().outerWidth(true)
                    }
                }
            }
            $(that.option.tab_list).animate({
                marginLeft: 0 - p + "px"
            }, "fast")
        }
    };
    $.fn.menuTab = function(option){
        var opt = $.extend({},option);
        return new TabElement(opt);
    }
})(jQuery)

最後初始化插件及綁定事件就能夠了

       var TabMenu = $('.content-tabs').menuTab({
            'content_tab':'.content-tabs',
            'nav_tab':'.page-tabs',
            'tab_list':'.page-tabs-content'
        });
        $('.J_tabRight').on('click',function(){
            TabMenu.nextTab();
        })
        $('.J_tabLeft').on('click',function(){
            TabMenu.prevTab();
        })
        $('.J_menuTab').on('click',function(){
            $('.J_menuTab.active').removeClass('active');
            $(this).addClass('active');
            TabMenu.goTab($(this));
        })

這樣，就實現了一個可輪播滾動的Tab選項卡列表了。