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>