jQuery TAB插件 支持多种切换效果

TAB（选项卡）效果是网页中常见的页面效果 实现它也有N种方式，今天闲来没事我就写了第N+1种 点这里查看DEMO 

基于jQuery 的TAB插件   其特色是可以较为自由的设置各种选项，达到自己需要的效果。样式没有好好写，只写了够实现功能的，至于美好就自己去写CSS去美化一下好了。

主要功能：

实现选项卡切换
内置五种切换方式 可以通过参数设置来设定
可以选择触发方式 是点击还是划过
是否自动切换

使用方式：

 $(exp).tab({ //选择要使用tab插件的元素 最好是ID 比如"#testtab"
    tabId:    "", //切换控制器选择符 最好是ID  比如 "#tabcon"
    tabTag:   "", //切换控制器标签 比如 li
    conId:    "", //切换容器ID 
    conTag:   "", //切换容器tag
    curClass: "cur", //标记当前的类名 默认为 cur
    act:      "click", //触发方式 默认为 点击
    dft:      0, //默认显示第几项 默认为第一项
    effact:   null, //效果 默认为无切换效果
    auto:     false, //自动切换 默认为不自动切换
    autotime: 3000, //如果自动切换 自动切换的时间间隔 默认 3 秒
    aniSpeed: 500 //如果运用动画切换效果 动画执行的时间间隔 默认500ms
    })

DOM 结构：

 

 <div class="testtab" id="testtab">
        <div id="tabtag" class="tabtag">
            <ul>
                <li class="cur">项目一</li>
                <li>项目二</li>
                <li>项目三</li>
                <li>项目四</li>
            </ul>
        </div>
        <div id="tabcon" class="tabcon">
            <div>
                内容11111
                </div>
                <div>
                内容22222
                </div>
                <div>
                内容3333333
                </div>
                <div>
                内容444444
                </div>
       </div>
  </div>

 

实例：

$("#testtab").tab({
    tabId:"#tabtag", //切换控制器的ID
    tabTag:"li",  //切换控制器标签
    conId:"#tabcon", //内容容器ID
    conTag:"div",  //容器标签
    act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
    effact: "scrolly" //效果为纵向滚动
    })

 

插件代码：

function cur(ele,currentClass,tag){ //标记当前函数
        ele= $(ele)? $(ele):ele;
        if(!tag){
            ele.addClass(currentClass).siblings().removeClass(currentClass);
            }else{
                ele.addClass(currentClass).siblings(tag).removeClass(currentClass);
                }
        }
    $.fn.tab=function(options){ //插件开始
    var org={ //原始设置
        tabId:    "",
        tabTag:   "",
        conId:    "",
        conTag:   "",
        curClass: "cur",
        act:      "click",
        dft:      0,
        effact:   null,
        auto:     false,
        autotime: 3000,
        aniSpeed: 500
        }    
        
    $.extend(org,options); //合并自定义设置
    
    var t=false; //自动开始定时器
    var k=0; //切换序列 默认为0
    var _this=$(this); //取得当前元素
    var tagwrp=$(org.tabId); //切换控制器容器
    var conwrp=$(org.conId); //切换控制器标签
    var tag=tagwrp.find(org.tabTag); //切换容器的容器
    var con=conwrp.find(org.conTag); //切换内容的容器    
    var len=tag.length; //有多少个项目
    var taght=parseInt(tagwrp.css("height")); //得到控制器高度
    var conwh=conwrp.get(0).offsetWidth; //得到控制器宽度
    var conht=conwrp.get(0).offsetHeight; //以及高度
    var curtag=tag.eq(org.dft); //初始控制器标签
    //初始化tab
    cur(curtag,org.curClass); //标记默认序列 
    con.eq(org.dft).show().siblings(org.conTag).hide(); //显示默认项目
    
    if(org.effact=="scrollx"){ //如果使用 横向滚动 则准备CSS 条件
        var padding=parseInt(con.css("padding-left"))+parseInt(con.css("padding-right"));                                        
        _this.css({
                  "position"   :"relative",
                  "height"     :taght+conht+"px",
                  "overflow"   :"hidden" 
                  });                
        
        conwrp.css({
                   "width"     :len*conwh+"px",
                   "height"    :conht+"px",
                   "position"  :"absolute",
                   "top"       :taght+"px"
                   });
        
        con.css({
                "float"        :"left",
                "width"        :conwh-padding+"px",
                "display"      :"block"
                });
        }
        
    if(org.effact=="scrolly"){ //如果使用 纵向滚动 则准备CSS 条件
        var padding=parseInt(con.css("padding-top"))+parseInt(con.css("padding-bottom"));                                        
        _this.css({
                  "position"   :"relative",
                  "height"     :taght+conht+"px",
                  "overflow"   :"hidden" 
                  });
        tagwrp.css({
                   "z-index"   :100
                   })        
        conwrp.css({
                   "width"     :"100%",
                   "height"    :len*conht+"px",
                   "position"  :"absolute",
                   "z-index"   :99                                                 
                   })        
        con.css({
                "height"       :conht-padding+"px",
                "float"        :"none",                                            
                "display"      :"block"
                });
        }    
    
    tag.css({"cursor":"pointer"}) //切换控制标签用手性鼠标
        .each(function(i){ //循环切换
        tag.eq(i).bind(org.act,function(){ //绑定到鼠标动作
                cur(this,org.curClass);    //标记当前
                k=i; //传递序列
                switch(org.effact){ //根据设定的切换效果去转换切换方式                    
                    case "slow"    : con.eq(i).show("slow").siblings(org.conTag).hide("slow"); //slow 效果
                    break;
                    case "fast"    : con.eq(i).show("fast").siblings(org.conTag).hide("fast"); //fast 效果
                    break;
                    case "scrollx" : conwrp.animate({left:-i*conwh+"px"},org.aniSpeed); //横向滚动效果
                    break;
                    case "scrolly" : conwrp.animate({top:-i*conht+taght+"px"},org.aniSpeed); //纵向滚动效果
                    break;
                    default        : con.eq(i).show().siblings(org.conTag).hide(); //默认切换
                    break;
                    //End of switch
                    }            
                }        
            )                                      
        })    
    
    if(org.auto){     //自动切换    
        var drive=function(){
            if(org.act=="mouseover"){
                tag.eq(k).mouseover();
                }else if(org.act=="click"){
                tag.eq(k).click();
                }            
            k++;            
            if(k==len) k=0;            
            }
        t=setInterval(drive,org.autotime);    
        }        
    //End of $.fn.tab    

 

 点这里查看DEMO