选项卡（tab），是一种能提供给用户在同一个页面切换不同内容的UI。尤其是在页面布
局紧凑的页面上，提供了非常好的用户体验。
一．使用tabs
html :
<div id="tabs">
<ul>
<li><a href="#tabs1">tab1</a></li>
<li><a href="#tabs2">tab2</a></li>
<li><a href="#tabs3">tab3</a></li>
</ul>
<div id="tabs1">tab1-content</div>
<div id="tabs2">tab2-content</div>
<div id="tabs3">tab3-content</div>
</div>
jQuery :
$('#tabs').tabs();
二．修改tabs 样式
在弹出的tabs 对话框中，在火狐浏览器中打开Firebug 或者右击->查看元素。这样，
可以看看tabs 的样式，根据样式进行修改。为了和网站主题符合，对tabs 的标题背景进行
修改。
//无须修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header {
background:url(../img/xxx.png);
}
//去掉外边框
#tabs {
border:none;
}
//内容区域修饰
#tabs1, #tabs2, #tabs3 {
height:100px;
padding:10px;
border:1px solid #aaa;
border-top:none;
position:relative;
top:-2px;
}
三．tabs()方法的属性
选项卡方法有两种形式：1.tabs(options)，options 是以对象键值对的形式传参，
每个键值对表示一个选项；2.tabs('action', param)，action 是操作选项卡方法的
字符串，param 则是options 的某个选项。
tabs 外观选项
属性 | 默认值/类型 | 说明 |
collapsible | false/布尔值 | 当设置为true 是，允许选项卡折叠对应的内容。 默认值为false，不会关闭对应内容 |
disabled | 无/数组 | 使用数组来指定禁用哪个选项卡的索引，比如： [0,1]来禁用前两个选项卡 |
event | click/字符串 | 触发tab 的事件类型，默认为click。可以设置 mouseover 等其他鼠标事件 |
active | 数组和布尔值 | 如果是数组，初始化时默认显示哪个tab，默认值 为0。如果是布尔值，那么默认是否折叠。条件 必须是collapsible 值为true |
heightStyle | content/字符串 | 默认为content，即根据内容伸展高度。Auto 则自 动根据最高的那个为基准，fill 则是填充一定的可 用高度 |
show | false 布尔值 | 切换选项卡时，默认采用淡入效果 |
hide | false 布尔值 | 切换选项卡时，默认采用淡出效果 |
$('#tabs').tabs({
collapsible : true,
disabled : [0],
event : 'mouseover',
active : false,
heightStyle : 'content',
hide : true,
show : true,
});
注意：设置true 后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串
参数。
show 和hide 可选特效
特效名称 | 说明 |
blind | 对话框从顶部显示或消失 |
bounce | 对话框断断续续地显示或消失，垂直运动 |
clip | 对话框从中心垂直地显示或消失 |
slide | 对话框从左边显示或消失 |
drop | 对话框从左边显示或消失，有透明度变化 |
fold | 对话框从左上角显示或消失 |
highlight | 对话框显示或消失，伴随着透明度和背景色的变化 |
puff | 对话框从中心开始缩放。显示时“收缩”，消失时“生长” |
scale | 对话框从中心开始缩放。显示时“生长”，消失时“收缩” |
pulsate | 对话框以闪烁形式显示或消失 |
四．tabs()方法的事件
除了属性设置外，tabs()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回
调函数。
tab 事件选项
事件名 | 说明 |
create | 当创建一个选项卡时激活此事件。该方法有两个参数 (event, ui)，ui 参数有两个子属性tab 和panel，得到当前 活动卡和内容选项的对象 |
activate | 当切换一个活动卡时，启动此事件。该方法有两个参数 (event, ui)，ui 参数有四个子属性newTab、newPanel、 oldTab，oldPanel。分别得到的时候新tab 对象、新内容 对象、旧tab 对象和旧内容对象 |
beforeActivate | 当切换一个活动卡之前，启动此事件。该方法有两个参 数(event, ui)，ui 参数有四个子属性newTab、newPanel、 oldTab，oldPanel。分别得到的时候新tab 对象、新内容 对象、旧tab 对象和旧内容对象 |
load | 当ajax 加载一个文档后激活此事件。该方法有两个参数 (event, ui)，ui 参数有两个子属性tab 和panel，得到当前 活动卡和内容选项的对象 |
beforeLoad | 当ajax 加载一个文档前激活此事件。该方法有两个参数 (event, ui)，ui 参数有四个子属性tab 和panel 以及jqXHR 和ajaxSettings，前两个得到当前活动卡和内容选项的对 象，后两个是ajax 操作对象 |
//当选项卡创建时触发
$('#tabs').tabs({
create : function (event, ui) {
alert($(ui.tab.get()).html());
alert($(ui.panel.get()).html());
},
});
//当切换到一个活动卡时触发
$('#tabs').tabs({
activate : function (event, ui) {
alert($(ui.oldTab.get()).html());
alert($(ui.oldPanel.get()).html());
alert($(ui.newTab.get()).html());
alert($(ui.newPanel.get()).html());
},
});
//当切换到一个活动卡之前触发
$('#tabs').tabs({
beforeActivate : function (event, ui) {
alert($(ui.oldTab.get()).html());
alert($(ui.oldPanel.get()).html());
alert($(ui.newTab.get()).html());
alert($(ui.newPanel.get()).html());
},
});
ajax 调用的基本方法
html :
<ul>
<li><a href="tabs1.html">tab1</a></li>
<li><a href="tabs2.html">tab2</a></li>
<li><a href="tabs3.html">tab3</a></li>
</ul>
而tabs1.html、tabs2.html 和tabs3.html 只要书写即可，无须包含<div>。比如：
tabs1-content
//ajax 加载后触发
$('#tabs').tabs({
load : function (event, ui) {
alert('ajax 加载后触发！');
}
});
//ajax 加载前触发
$('#tabs').tabs({
beforeLoad : function (event, ui) {
ui.ajaxSettings.url = 'tabs2.html';
ui.jqXHR.success(function (responseText) {
alert(responseText);
});
}
});
tabs('action', param)方法
方法 | 返回值 | 说明 |
tabs('disable') | jQuery 对象 | 禁用选项卡 |
tabs('enable') | jQuery 对象 | 启用选项卡 |
tabs('load') | jQuery 对象 | 通过ajax 获取选项卡内容 |
tabs('widget') | jQuery 对象 | 获取选项卡的jQuery 对象 |
tabs('destroy') | jQuery 对象 | 删除选项卡，直接阻断了tabs |
tabs('refresh') | jQuery 对象 | 更新选项卡，比如高度 |
tabs('option', param) | 一般值 | 获取options 属性的值 |
tabs('option', param, value) | jQuery 对象 | 设置options 属性的值 |
//禁用选项卡
$('#tabs').tabs('disable'); //$('#tabs').tabs('disable', 0);
//启用选项卡
$('#tabs').tabs('enable'); //$('#tabs').tabs('enable', 0);
//获取选项卡jQuery 对象
$('#tabs').tabs('widget');
//更新选项卡
$('#tabs').tabs('refresh');
//删除tabs 选项卡
$('#tabs').tabs('destroy');
//重载指定选项卡内容
$('#button').click(function () {
$('#tabs').tabs('load', 0);
});
//得到tabs 的options 值
alert($('#tabs').tabs('option', 'active'));
//设置tabs 的options 值
$('#tabs').tabs('option', 'active', 1);
五．tabs 中使用on()
在tabs 的事件中，提供了使用on()方法处理的事件方法。
on()方法触发的选项卡事件
特效名称 | 说明 |
tabsload | Ajax 加载后触发 |
tabsbeforeload | Ajax 加载前触发 |
tabsactivate | 选项卡切换时触发 |
tabsbeforeactivate | 选项卡切换前触发 |
//ajax 加载后触发
$('#tabs').on('tabsload', function () {
alert('ajax 加载后触发！');
});
//ajax 加载前触发
$('#tabs').on('tabsbeforeload', function () {
alert('ajax 加载前触发！');
});
//选项卡切换时触发
$('#tabs').on('tabsactivate', function () {
alert('选项卡切换时触发！');
});
//选项卡切换前触发
$('#tabs').on('tabsbeforeactivate ', function () {
alert('选项卡切换前触发！');
});
