之前，我们已经介绍了 jQuery UI 库，CSS 框架。下面，我们将学习这些有增强可视化效果，高度可配置的用户交互组件。
Tab 的特性是，点击 tab 后，会高亮该 tab，并显示他的关联content panel，期间会确保所有其他的 content panel 是 hidden。一次最多只有一个 content panel 可以被打开，也可以没有。
本章我们主要介绍以下几点：
- 默认安装启用控件
- CSS框架是如何触发 tab 控件
- 怎样为一组 tabs 应用自定义样式
- 使用 tab 控件的配置选项配置它
- content panel 变换时，内置过渡效果
- 使用 tab 控件的方法控制他们
- tab 的自定义事件
- AJAX tabs
1.默认安装启用 tab
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
>
Tabs
</
title
>
6
<
link
rel
="stylesheet"
7
href
="css/smoothness/jquery-ui-1.8.9.custom.css"
>
8
</
head
>
9
<
body
>
10
<
div
id
="myTabs"
>
11
<
ul
>
12
<
li
><
a
href
="#a"
>
Tab 1
</
a
></
li
>
13
<
li
><
a
href
="#b"
>
Tab 2
</
a
></
li
>
14
</
ul
>
15
<
div
id
="a"
>
This is the content panel linked to the first tab,
16
it is shown by default.
17
</
div
>
18
<
div
id
="b"
>
This content is linked to the second tab and will
19
be shown when its tab is clicked.
20
</
div
>
21
</
div
>
22
<
script
src
="development-bundle/jquery-x.x.x,js"
>
23
</
script
>
24
<
script
src
="development-bundle/ui/jquery.ui.core.js"
>
25
</
script
>
26
<
script
27
src
="development-bundle/ui/jquery.ui.widget.js"
>
28
</
script
>
29
<
script
src
="development-bundle/ui/jquery.ui.tabs.js"
>
30
</
script
>
31
<
script
>
32
(
function
($){
33
$(
"
#myTabs
"
).tabs();
34
})(jQuery);
35
</
script
>
36
</
body
>
37
</
html
>
Tab 控件一般由几个特定方式组合在一起的基本HTML元素构建：
- 一个调用 tabs 方法的外层容器元素
- 一个元素列表 ，如<ul> 或 <ol>
- 每个 <li> 都是一个 tab，其中包含 一个 <a> 元素
- 每个 tab 的 content panel 元素
链接的 href 属性必须设置 # 为前缀的 识别。content panel 使用 <div> 元素，也可以使用其他HTML元素，panle Template 和 tabTemplate配置选项可以用来设置构成控件的匀速。
在 style sheets 和 page elements 后面加载 script ，被证明是一种能够显然改善加载时间的技巧，一旦有可能就要使用。
在链接了jQuery后，我们链接到所有的组件都必须的jquery.ui.core.js文件（除了 effects，它们有自己的 core 文件），还有jquery.ui.widget.js文件。这时我们连接到组件自己的源文件，jquery.ui.tabs.js。
在加载了必须的 script 后，我们加载自己的 script。
2.Tab CSS框架 classes
来简短地复习下 classnames，看看它们如何为控件外貌做贡献 。
外层div 被加上以下 classnames：
| Classname | Purpose |
| ui-tabs | 允许应用tab特有的结构CSS |
| ui-widget | 设置一般字体样式，被嵌入元素继承 |
| ui-widget-content | 提供主题特有的样式 |
| ui-corner-all | 为容器应用圆角 |
<ul>元素被加上以下 classnames：
| Classname | Purpose |
| ui-tabs-nav | 允许应用tab特有的结构CSS |
| ui-helper-reset | 使应用到<ul>上的浏览器应特有的样式失效 |
| ui-helper-clearfix | 当这个元素有子元素在浮动，为这个元素应用clear-fix |
| ui-widget-header | 提供主题特有的样式 |
| ui-corner-all | 应用圆角 |
成为tab headings 的每个<li>元素个体，被加上了以下classnames：
| Classname | Purpose |
| ui-state-default | 为tab headings 应用基本的、没有激活的、没有被选中的、没有被鼠标悬停的状态 |
| ui-corner-top | 将元素上边缘设置为圆角 |
| ui-tabs-selected | 仅仅被用在活动的tab上。页面加载后默认是第一个tab，选择其他的tab 会从当前被选中的tab上移除这个class，并应用到新的选中的tab上。 |
| ui-state-active | 为当前选中的tab应用主题特有的样式，像ui-tabs-selected一样工作。ui-tabs-selected提供CSS功能，而ui-state-active提供可视化，装饰样式。 |
每个<li>中的<a>元素，没有得到任何classnames，但是框架依然会为他们应用结构和主题特有的样式。
panel 元素被加上以下classnames：
| Classname | Purpose |
| ui-tabs-panel | 为content panels应用结构CSS |
| ui-widget-content | 应用主题特有的样式 |
| ui-corner-bottom | 为content panels的下边缘应用圆角 |
所有这些classes被库自动地添加到HTML元素下面，我们在页面编码时或添加基本的化妆时，不需要手动添加他们。
3.为tabs应用自定义主题
下面我们通过覆盖的方法，改变tabs的基本外貌。
1
#myTabs {
2
width:400px; padding:5px; border:1px solid #636363;
3
background:#c2c2c2 none;
4
}
5
.ui-widget-header {
6
border:0; background:#c2c2c2 none; font-family:Georgia;
7
}
8
#myTabs .ui-widget-content {
9
border:1px solid #aaa; background:#fff none; font-size:80%;
10
}
11
.ui-state-default, .ui-widget-content .ui-state-default {
12
border:1px solid #636363; background:#a2a2a2 none;
13
}
14
.ui-state-active, .ui-widget-content .ui-state-active {
15
border:1px solid #aaa; background:#fff none;
16
}
我们覆盖了jquery.ui.tabs.css中的规则。我们需要使用我们容器元素和jquery.ui.theme.css中的选择器 的ID选择器，最后击败 .ui-tabs .ui-tabs-panle。
4.配置选项
不是默认的行为如下：
| Option | Default value | Used to… |
| ajaxOptions | null | 指定额外的AJAX选项。我们可以使用任何jQuery的$.ajax()方法暴漏的选项，如data,type,url等。 |
| cache | false | 控制远程数据仅在页面初始化时被加载一次。还是每次相应的tab被点击时都被重新加载。 |
| collapsible | false | 允许一个活动的tab被点击后不被选中，所有的content panels被hidden ，只有tab headings 可见。 |
| cookie | null | 使用页面加载的cookie data来显示活动tab。这个选项必须使用cookie插件。 |
| disabled | false | 页面加载时禁用控件。我们也可以传送一个tab索引（从0开始）目录数组来禁用指定的tabs。 |
| event | “click” | 指定播放content panels时触发的事件 |
| fx | null | 指定一个变换tabs时的动画效果。支持一个对象或一个动画效果数组。 |
| idPrefix | “ui-tabs-” | 当远程tab heading的<a>元素没有title attribute，为其生成一个独一无二的ID和碎片标识。 |
| panelTemplate | “<div></div>” | 指定tab panel的 content 部分所使用的元素名称。 |
| selected | 0 | 当页面加载时，显示一个不是第一个的tab panel（覆盖cookie属性） |
| spinner | “Loding…” | 为远程tabs指定加载图标。 |
| tabTemplate | <li>
<a href=”#{href}”>
<span>
#{label}
</span>
</a>
</li> | 指定当创建一个新的tabs时所使用的元素。当新tab被创建时，#{href}和#{label}字符串会被控件内部替换 |
4.1 选一个tab，selected、disabled、collapsible选项
1
var tabOpts = {
2
selected: 1,
3
disabled:[2],
4
collapsible:true
5
};
6
$("#myTabs").tabs(tabOpts);
索引从0开始。当页面加载后，第三个tab被应用上ui-widget-disabled，从ui.theme.css获得disabled样式。它不再会相应任何鼠标的交互。
4.2 过渡效果，fx 选项
1
var tabOpts = {
2
fx: [{
3
opacity: "toggle",
4
duration: "slow"
5
},
6
null]
7
};
设置 fades-out 为淡出，设置 fades-in 为null。
toggle是切换的意思，opacity是不透明，即在可见和不可见见切换。duration是持续时间。
1
var tabOpts = {
2
fx: {
3
opacity: "toggle",
4
duration: "slow"
5
}
6
};
只设置一个时，此时fades-out 和 fades-in 共享此选项。
5. tab的事件
| Event | Fired when… |
| add | 一个新tab已经被添加 |
| disable | 一个tab已经被禁用 |
| enable | 一个tab已经被启用 |
| load | 一个tab的远程数据已经被加载完毕 |
| remove | 一个tab已经被移除 |
| select | 一个tab已经被选择 |
| show | 一个tab已经被显示 |
每个组件都有回调选项，我们总是在变更执行之前调用回调函数。因此，你可以从你的回调返回一个false来防止执行。
1
<
script
>
2
(
function
($){
3
var
handleSelect
=
function
(e, tab) {
4
$(
"
<p></p>
"
, {
5
text:
"
Tab at index
"
+
tab.index
+
"
selected
"
,
6
"
class
"
:
"
status-message ui-corner-all
"
7
}).appendTo(
"
.ui-tabs-nav
"
,
"
#myTabs
"
).fadeOut(
5000
,
function
()
8
{
9
$(
this
).remove();
10
});
11
},
12
tabOpts
=
{
13
select: handleSelect
14
}
15
$(
"
#myTabs
"
).tabs(tabOpts);
16
})(jQuery);
17
</
script
>
18
<
style
>
19
.status-message
{
20
padding
:
11px 8px 10px
;
margin
:
0
;
border
:
1px solid #aaa
;
21
position
:
absolute
;
right
:
10px
;
top
:
9px
;
font-size
:
11px
;
22
background-color
:
#fff
;
23
}
24
<style>
5.1 绑定事件
使用组件暴漏的事件回调函数是控制交互的基本的方式，然而，我们也可以抓住在任何组件任何时间触发的事件。我们可以使用基本的jQuery bind()方法，将自定义事件绑定到 event handler，通过像绑定一个基本DOM事件那样，以同样的方式触发，例如点击。下面是自定义绑定事件和它们的触发时机：
| Event | Fired when… |
| tabsselect | |
| tabsload | |
| tabsshow | |
| tabsadd | 一个tab已经被加到界面 |
| tabsremove | 一个tab已经从界面移除 |
| tabsdisable | |
| tabsenable | |
列表中的前三个事件依次发生。这些事件有不同的触发时机，有时在执行之前触发，有时在执行后触发。
1
<
script
>
2
(
function
($) {
3
$(
"
#myTabs
"
).tabs();
4
$(
"
#myTabs
"
).bind(
"
tabsselect
"
,
function
(e, tab) {
5
alert(
"
The tab at index
"
+
tab.index
+
"
was selected
"
);
6
});
7
})(jQuery);
8
</
script
>
通过绑定 tabsselect 和使用 select 回调函数产生同样的效果，在新tab激活前，显示提示信息。所有的空间都能使用bind()方法，只需简单地替换事件的前缀。
6 使用tab的方法
| Method | Used to… |
| abort | 停止当前进程中的任何的动画或AJAX请求 |
| add | 以编码的方式添加一个新tab，指定 content的 URL，一个 label，和可选的index作为参数。 |
| destroy | 完全地移除tabs控件 |
| disable | 通过传递一个以0开头的索引数字给此方法，禁用指定tab。或什么都不传，禁用全部tabs |
| enable | 通过传递一个以0开头的索引数字给此方法，启用指定tab。或什么都不传，启用全部tabs |
| length | 返回tabs控件的个数 |
| load | 重载AJAX tab的 content，指定tab的索引数字。 |
| option | 在控件初始化后，get或set 任何属性 |
| remove | 指定tab的索引，通过编码的方式移除一个tab。如果没有提供索引，则第一个tab被移除。也可以用tab的href值移除它 |
| rotate | 在指定的milliseconds后，自动改变活动tab，一次或者重复地。 |
| select | 基于索引，以编码的方式选择一个tab，与浏览者点击一个tab的效果一样。 |
| url | 改变AJAX tab的content的URL。这个方法需要tab的索引数字和新url。 |
| widget | tabs() widget方法被调用时，返回该元素。 |
6.1 启用、禁用tabs
1
<
button
type
="button"
id
="enable"
>
Enable
</
button
>
2
<
button
type
="button"
id
="disable"
>
Disable
</
button
>
3
4
<
script
>
5
(
function
($){
6
$(
"
#myTabs
"
).tabs({
7
disabled: [
1
]
8
});
9
$(
"
#enable
"
).click(
function
() {
10
$(
"
#myTabs
"
).tabs(
"
enable
"
,
1
);
11
});
12
$(
"
#disable
"
).click(
function
() {
13
$(
"
#myTabs
"
).tabs(
"
disable
"
,
1
);
14
});
15
})(jQuery);
16
</
script
>
第一个参数是方法名称，第二个参数是索引号。不传递第二个参数将启用禁用全部tabs。
6.2 添加、移除tabs
1
<
label
>
Enter a tab to remove:
</
label
>
2
<
input
for
="indexNum"
id
="indexNum"
>
3
<
button
type
="button"
id
="remove"
>
Remove!
</
button
><
br
>
4
<
button
type
="button"
id
="add"
>
Add a new tab!
</
button
>
5
6
<
script
>
7
(
function
($){
8
$(
"
#myTabs
"
).tabs();
9
$(
"
#remove
"
).click(
function
() {
10
$(
"
#myTabs
"
).tabs(
"
remove
"
, parseInt($(
"
#indexNum
"
).val(),
11
10
));
12
});
13
$(
"
#add
"
).click(
function
() {
14
$(
"
#myTabs
"
).tabs(
"
add
"
,
"
remoteTab.txt
"
,
"
A New Tab!
"
);
15
});
16
})(jQuery);
remove若没有指定索引参数，则删除全部tabs。
add的第二个参数会读取文件中的内容，还可以增加一个索引参数，定义新标签新增的位置，如果没有，则默认在最后一个。
6.3 创建旋转木马样式的tab
rotate方法会使得所有的tabs（和它关联的content panel）自动地一个接一个地播放。
1
<
script
>
2
(
function
($){
3
$(
"
#myTabs
"
).tabs().tabs(
"
rotate
"
,
1000
,
true
);
4
})(jQuery);
5
</
script
>
尽管我们不能直接地使用初始化的tabs()方法，我们依然可以在链式地使用它。第一个参数是milliseconds，第二个参数是表明循环式是一直不断地还是仅仅发生一次。
6.4 destroy 方法
和所有的jQuery UI控件一样，拥有destroy方法。这个方法会完全移除tab控件，回到HTML的原始状态。如果原始tabs采用硬编码的形式，而不是那些使用add方法添加的，destroyed后会依然残存。
6.5 Getting 和 Setting 选项
1
<
button
id
="show"
type
="button"
>
Show Selected!
</
button
>
2
<
label
for
="newIndex"
>
Enter a index to actiave
</
label
>
3
<
input
id
="newIndex"
type
="text"
>
4
<
button
id
="setIndex"
type
="button"
>
Set Index
</
button
>
5
<
div
id
="myTabs"
>
6
<
ul
>
7
<
li
><
a
href
="#a"
>
a
</
a
></
li
>
8
<
li
><
a
href
="#b"
>
b
</
a
></
li
>
9
</
ul
>
10
<
div
id
="a"
>
11
ddafaf
12
</
div
>
13
<
div
id
="b"
>
14
fasdfafa
15
</
div
>
16
</
div
>
17
<
script
>
18
19
$(
function
(){
20
$(
"
#myTabs
"
).tabs();
21
$(
"
#show
"
).click(
function
(){
22
$(
"
<p></p>
"
).text(
"
Tab at index
"
+
$(
"
#myTabs
"
).tabs(
"
option
"
,
"
selected
"
)
+
"
is active
"
)
23
.appendTo(
"
.ui-tabs-nav
"
).fadeOut(
1000
);
24
});
25
$(
"
#setIndex
"
).click(
function
(){
26
$(
"
#myTabs
"
).tabs(
"
option
"
,
"
selected
"
,parseInt($(
"
#newIndex
"
).val(),
10
));
27
});
28
});
29
</
script
>
我们通过传递一个字符串 selected 作为第二个参数。任何option的值都能通过这种方法访问到。
7 AJAX tabs
1
<
li
><
a
href
="remoteTab.txt"
>
AJAX Tab
</
a
></
li
>
2
$("#myTabs").tabs();
如果你使用的是DOM浏览器，你会看到我们添加的远程tab的文件路径已经被替换。作为替代，它生成了一个新的片段标示符，并设置给了href。新的片段作为新tab的id，所以tab heading依然显示这个tab。
从外部文件加载数据，依然可以从URLs加载。当使用查询字符串加载content从数据库，或者从web service的时候，很有用。AJAX tabs包含 load 和 url 方法。load 方法用来从在或者重载 content，它能够非常方便地刷新变化很频繁content。
tabs 空间的AJAX功能没有构建固有的 cross-domain 支持 。因此，除非附加地使用PHP或也谢其他的server-scripting language作为代理，
才能使用JSON结构的数据和jQuery的JSONP功能，不然的话文件或者URLs必须处于同一个domain。
7.1 改变远程tab的content 的URL
1
<
select
id
="fileChooser"
>
2
<
option
value
="buttonTheme.css"
>
buttonTheme.css
</
option
>
3
<
option
value
="remoteAccordion.txt"
>
remoteAccordion
</
option
>
4
</
select
>
5
<
div
id
="myTabs"
>
6
<
ul
>
7
<
li
><
a
href
="#a"
>
a
</
a
></
li
>
8
<
li
><
a
href
="remoteAccordion.txt"
>
b
</
a
></
li
>
9
</
ul
>
10
<
div
id
="a"
>
11
ddafaf
12
</
div
>
13
</
div
>
14
<
script
>
15
16
$(
function
(){
17
$(
"
#fileChooser
"
).change(
function
(){
18
$(
"
#myTabs
"
).tabs(
"
url
"
,
1
,$(
this
).val());
19
});
20
$(
"
#myTabs
"
).tabs();
21
});
22
</
script
>
我们只需调用url方法，传递tab的索引和新的URL。
7.2 远程tab的重载
也许你已经注意到了，当远程tab的url已经变更，但是此时content没有更新。直到切换到不同的tab再切换回来。为了维修这个问题，可以使用 load 方法。
1
$(function(){
2
$("#fileChooser").change(function(){
3
$("#myTabs").tabs("url",1,$(this).val()).tabs("load",1);
4
});
5
$("#myTabs").tabs();
6
});
tab heading轻微的闪烁是因为 spinner 选项的默认值被设为 Loading。
7.3 显示通过JSONP获得的数据
使用 jQuery 库的 getJSON 方法，可以绕过 cross-domain 的排除政策，并显示来自其他的 domain 的供给。
1
<
html
>
2
<
head
>
3
<
title
>
ssss
</
title
>
4
<
link
rel
="Stylesheet"
href
="jq/jquery-ui-1.8.9.css"
/>
5
</
head
>
6
<
body
>
7
<
div
id
="myTabs"
>
8
<
ul
>
9
<
li
><
a
href
="#a"
>
a
</
a
></
li
>
10
<
li
><
a
href
="#flickr"
>
b
</
a
></
li
>
11
</
ul
>
12
<
div
id
="a"
>
13
ddafaf
14
</
div
>
15
<
div
id
="flickr"
>
16
17
</
div
>
18
</
div
>
19
<
script
src
="development-bundle/jquery-1.4.4.js"
></
script
>
20
<
script
src
="development-bundle/ui/jquery.ui.core.js"
></
script
>
21
<
script
src
="development-bundle/ui/jquery.ui.widget.js"
></
script
>
22
<
script
src
="development-bundle/ui/jquery.ui.tabs.js"
></
script
>
23
<
script
>
24
(
function
($){
25
var
img
=
$(
"
<img />
"
,{
26
height:
100
,
27
width:
100
28
}),
29
tabOpts
=
{
30
select:
function
(event,ui){
31
if
(ui.tab.toString().indexOf(
"
flickr
"
)
!=-
1
){
32
console.log(
"
flickr
"
);
33
var
flickerAPI
=
"
http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?
"
;
34
$.getJSON(
35
flickerAPI,
36
{
37
tags:
"
nebula
"
,
38
format:
"
json
"
,
39
tagmode:
"
any
"
40
},
41
function
(data){
42
console.log(
"
sucess
"
);
43
$(
"
#flickr
"
).empty();
44
$.each(data.items,
function
(i,item){
45
console.log(i);
46
img.clone().attr(
"
src
"
,item.media.m).appendTo(
"
#flickr
"
);
47
if
(i
==
5
){
48
return
false
;
49
}
50
});
51
}
52
);
53
}
54
}
55
};
56
$(
"
#myTabs
"
).tabs(tabOpts);
57
})(jQuery);
58
</
script
>
59
</
body
>
60
</
html
>
每次id 为 filickr 的 tab 被选中，jQuery getJSON 方法被用来重新获得 http://www.flickr.com 提供的供给。
一旦数据返回，首先清空contents来防止。。。。然后使用 jQuery 的 each() 功能方法，迭代返回的JSON中的每一个对象，并创建一个 img 克隆来存储。
没个图像的新的拷贝都有src属性，它被设为当前供给对象的信息，并把图像添加到空的tab中。一旦迭代超过6次，我们推出each()方法。
8 总结
tab控件是一个卓越的方式，来组织相关或完全无关的 content 节，当访问者点击的时候让它们隐藏或显示，来节省页面上的空间。它可以调高站点的交互性，提升全部的功能，提供有吸引力的页面。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
