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 结构：

实例：

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

插件代码：

$(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