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>