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>