jquery另外一種類似tab切換效果

     簡要：最近做專案一些效果不能用淘寶kissy框架 所以程式碼得自己寫啊 網上當然有很多元件 但是用他們的程式碼很多(有的是我不需要的程式碼) 且還要看API 還不如自己動手寫個簡單一個，是這麼一種簡單的效果，比如選單項 有上週 本週 下週 等等項  那麼對應的項 有相應的內容，上週項 的 內容為111 本週項的內容為222 下週項內容為333等等，當我點選上一頁或者下一頁時候 切換當前的項及項對應的內容，如果項的索引等於0的時候 那麼上一頁按鈕灰掉 變得不可點選 同理 下一頁索引等於最大項時候 也灰掉 不可點選等。

簡單的HTML也貼上：(只是為了做個demo 容易說明而已)。

<div class="container">
        <div class="menuItem">
            <span class="prev">上一頁</span>
            <div class="wrapList">
                <ul class="list">
                    <li class="menu">上週</li>
                    <li class="menu">本週</li>
                    <li class="menu">下週</li>
                </ul>
            </div>
            <span class="next">下一頁</span>
        </div>
        <div class="allContent">
            <div class="inner">
                <div class="content">11111</div>
                <div class="content">22222</div>
                <div class="content">33333</div>
            </div>
        </div>
    </div>

CSS程式碼如下：

 <style>
     *{margin:0;padding:0;}
     ul,li{list-style:none;}
     .container{width:100%;overflow:hidden;}
     .menuItem {width:300px;height:22px;line-height:22px;}
     .prev, .next{float:left;width:60px;cursor:pointer;overflow:hidden;}
     .wrapList {float:left;width:60px;height:22px;line-height:22px;overflow:hidden;}
     .list li{float:left;width:60px;height:22px;line-height:22px;text-align:center;overflow:hidden;}
     .allContent{width:300px;height:300px;overflow:hidden;}
     .content{float:left;width:300px;height:300px;overflow:hidden;}
     .disable {cursor:default;color:gray;}
  </style>

JS程式碼如下：

/**
 * 另外一種類似tab切換效果
 */

 function TabPage() {
    
    this.config = {
        type               :     'click',      // 預設為點選 上一頁按鈕 及 下一頁按鈕
        menuItemCls        :     '.menu',      // 要移動的選單項
        menuWrapCls        :     '.wrapList',  // 選單項外部容器
        panelCls           :     '.content',   // 要滾動的內容
        panelWarpCls       :     '.allContent',// 皮膚外部容器
        prevCls            :     '.prev',      // 上一頁按鈕
        nextCls            :     '.next',      // 下一頁按鈕
        disabledCls        :     'disable',    //  當上一頁達到最前面的一頁 或者 下一頁達到最後一頁時候 讓其不可點選 按鈕變灰
        switchTo           :     0,            //  預設切換到第幾項 預設為第一項
        callback           :     null          //  切換完後新增回撥函式
    };

    this.cache = {
        index   :  0        // 儲存當前的索引 
    };
 }
 TabPage.prototype = {
    init: function(options) {
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;
        // 初始化容器的寬度 使其左右動畫移動操作
        var menuParent = $(_config.menuItemCls).parent(),
            menuWidth = $(_config.menuWrapCls).width(),
            len = $(_config.menuItemCls).length,
            contentParent = $(_config.panelCls).parent(),
            contentWidth = $(_config.panelWarpCls).width();
        $(menuParent).css("width",menuWidth * len);
        $(contentParent).css('width',contentWidth * len);
        
        // 儲存頁面載入時候 切換到第幾項索引 然後當上一頁點選 或者 下一頁點選 計算出當前的索引
        _cache.index = _config.switchTo;
        
        // 頁面初始化時候 先判斷_cache.index= 0,或者 _cache.index 等於最大的時候 如果是的話 那麼讓其對應的按鈕變灰不可點選
        if(_cache.index == 0) {
            !$(_config.prevCls).hasClass(_config.disabledCls) && $(_config.prevCls).addClass(_config.disabledCls);
            return;
        }else {
            $(menuParent).animate({"marginLeft":-menuWidth*_cache.index});
            $(contentParent).animate({"marginLeft":-contentWidth*_cache.index});
        }
        
        if(_cache.index == len) {
            !$(_config.nextCls).hasClass(_config.disabledCls) && $(_config.nextCls).addClass(_config.disabledCls);
            return;
        }
        // prev點選
        $(_config.prevCls).unbind(_config.type);
        $(_config.prevCls).bind(_config.type,function(){

            //判斷當前的索引是否是第一項 如果是的話 上一頁按鈕是不可點選的狀態
            if(_cache.index == 0) {
                !$(_config.prevCls).hasClass(_config.disabledCls) && $(_config.prevCls).addClass(_config.disabledCls);
                return;
             }else {
                _cache.index--;
                // 動畫animate 移動操作
                $(menuParent).animate({"marginLeft":-menuWidth*_cache.index});
                $(contentParent).animate({"marginLeft":-contentWidth*_cache.index});
                $(_config.nextCls).hasClass(_config.disabledCls) && $(_config.nextCls).removeClass(_config.disabledCls);
                
                //回撥函式
                
                _config.callback && $.isFunction(_config.callback) && _config.callback(_cache.index);

                // 如果已經是第一項的話 那麼上一頁按鈕灰掉 不可點選狀態
                if(_cache.index == 0){
                    !$(_config.prevCls).hasClass(_config.disabledCls) && $(_config.prevCls).addClass(_config.disabledCls);
                    return;
                }
                
            }
        });

        // click點選
        $(_config.nextCls).unbind('click');
        $(_config.nextCls).bind('click',function(){

            //判斷當前的索引是否是最後一項 如果是的話 下一頁按鈕是不可點選的狀態
            if(_cache.index == len-1) {
                !$(_config.nextCls).hasClass(_config.disabledCls) && $(_config.nextCls).addClass(_config.disabledCls);
                return;
             }else {
                _cache.index++;
                // 動畫animate 移動操作
                $(menuParent).animate({"marginLeft":-menuWidth*_cache.index});
                $(contentParent).animate({"marginLeft":-contentWidth*_cache.index});
                $(_config.prevCls).hasClass(_config.disabledCls) && $(_config.prevCls).removeClass(_config.disabledCls);

                //回撥函式
                _config.callback && $.isFunction(_config.callback) && _config.callback(_cache.index);

                // 同理 如果已經是最後的話 那麼下一頁按鈕灰掉 不可點選狀態
                if(_cache.index == len - 1){
                    !$(_config.nextCls).hasClass(_config.disabledCls) && $(_config.nextCls).addClass(_config.disabledCls);
                    return;
                }
             }
        });
    }
 };

呼叫方式如下：

<script>
    new TabPage().init({
		switchTo : 1,
		callback: function(index){
			console.log(index);
		}
	});
</script>