TAB（选项卡）效果是网页中常见的页面效果 实现它也有N种方式，在给大家推荐一款 基于jQuery 的TAB插件 其特色是可以较为自由的设置各种选项，达到自己需要的效果。样式没有写，只写了够实现功能的，至于美好就自己去写CSS去美化一下好了。
主要功能：
实现选项卡切换
内置五种切换方式 可以通过参数设置来设定
可以选择触发方式 是点击还是划过
是否自动切换
使用方式：
|
1
2
3
4
5
6
7
8
9
10
|
$(
"#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 结构：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<
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
>
|
实例：
|
1
2
3
4
5
6
7
8
9
|
$(
"#testtab"
).tab({
tabId:
"#tabtag"
,
//切换控制器的ID
tabTag:
"li"
,
//切换控制器标签
conId:
"#tabcon"
,
//内容容器ID
conTag:
"div"
,
//容器标签
act:
"click"
,
//点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
effact:
"scrolly"
//效果为纵向滚动
dft:0
})
|
插件代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
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或class唯一标识，用来获取子内容容器的集合，然后默认显示一项,给每个子控制器增加手性效果，
当有click或mouseover事件时，遍历所有的子控制器，
还可以设置自动切换选选卡
|
147
到【灌水乐园】发言
