基于jQuery插件的Tab选项卡效果 自由设置切换效果 支持自动播放
TAB(选项卡)效果是网页中常见的页面效果 实现它也有N种方式,在给大家推荐一款 基于jQuery 的TAB插件 其特色是可以较为自由的设置各种选项,达到自己需要的效果。样式没有写,只写了够实现功能的,至于美好就自己去写CSS去美化一下好了。
主要功能:
实现选项卡切换
内置五种切换方式 可以通过参数设置来设定
可以选择触发方式 是点击还是划过
是否自动切换
点击查看DEMO 点击下载JS
使用方式:
$( "#testtab" ).tab({
tabId: "#tabtag" , //切换控制器的ID
tabTag: "li" , //切换控制器标签
conId: "#tabcon" , //内容容器ID
conTag: "div" , //容器标签
act: "click" , //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
effact: "scrolly" //效果为纵向滚动 , scrollx: 横向滚动 , "slow" : slow效果
auto: true , //自动滚动,默认false
dft:2 //设置起始显示序列
})
DOM 结构:
< div class = "testtab" id = "testtab" >
< div id = "tabtag" class = "tabtag" style = "position:relative;" >
< ul >
< li class = "cur" >项目一</ li >
< li >项目二</ li >
< li >项目三</ li >
< li >项目四</ li >
</ ul >
</ div >
< div id = "tabcon" class = "tabcon" >
< div >
< ul >
< li >< a href = "#nogo" >内容一</ a ></ li >
< li >< a href = "#nogo" >内容一</ a ></ li >
< li >< a href = "#nogo" >内容一</ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< a href = "#nogo" >内容二</ a ></ li >
< li >< a href = "#nogo" >内容二</ a ></ li >
< li >< a href = "#nogo" >内容二</ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< a href = "#nogo" >内容三</ a ></ li >
< li >< a href = "#nogo" >内容三</ a ></ li >
< li >< a href = "#nogo" >内容三</ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< a href = "#nogo" >内容四</ a ></ li >
< li >< a href = "#nogo" >内容四</ a ></ li >
< li >< a href = "#nogo" >内容四</ a ></ li >
</ ul >
</ div >
</ div >
</ div >
实例:
$( "#testtab" ).tab({
tabId: "#tabtag" , //切换控制器的ID
tabTag: "li" , //切换控制器标签
conId: "#tabcon" , //内容容器ID
conTag: "div" , //容器标签
act: "click" , //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
effact: "scrolly" //效果为纵向滚动
dft:0
})
插件代码:
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); //得到控制器容器的jquery对象
var conwrp=$(org.conId); //得到内容容器的jquery对象
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); //初始控制器标签 eq(index)取得集合中的第index对象
//初始化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
基本原理:传入父亲控制器id,子控制的id或class标识,用来返回子控制器集合,在传入内容容器的id,
子内容容器的id或class唯一标识,用来获取子内容容器的集合,然后默认显示一项,给每个子控制器增加手性效果,
当有click或mouseover事件时,遍历所有的子控制器,.each(function(i){//传入当前集合的动作下标,
通过tag.eq(i)选择了当前动作的对象,
.bind(org.act,function(){//绑定到鼠标动作,显示该子集合的内容,con(i)
注意这个内容的i和子控制器的i是同一个 所以必须配套,
增加动作后,当有动作时,就会自动在li上增加class=cur属性,来设置动作的效果,其他的li就没有class=cur这个属性 ,
还可以设置自动切换选选卡