13.jQuery UI 选项卡UI

   选项卡（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('选项卡切换前触发！');});