jquery另外一种类似tab切换效果

时间：2022-11-30 12:33:17

     简要：最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个，是这么一种简单的效果，jquery另外一种类似tab切换效果比如菜单项 有上周 本周 下周 等等项  那么对应的项 有相应的内容，上周项 的 内容为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>

 

标签：

相关文章