Jquery——Day9（选项卡）

选项卡，是一种能提供给用户在同一界面切换不同内容的UI，尤其是在页面布局紧凑的页面上，提供了非常好的用户体验。

1、使用tabs，如下所示tabs.html

<div id="tabs">
	<ul>
		<li><a href="#tab1">tab1</a></li>
		<li><a href="#tab2">tab2</a></li>
		<li><a href="#tab3">tab3</a></li>
</ul>

<div id="tab1">tab1-content</div>
<div id="tab2">tab2-content</div>
<div id="tab3">tab3-content</div>
</div>

同时，在tabs.js中，

$('#tabs').tabs();

对它们样式进行设置，

//去掉外边框
#tabs{
border:none;
}

//内容区域修饰
#tab1,#tab2,#tab3{
height:100px;
pading:10px;
border:1px solid #aaa;
position:relative;
top:-2px;
}

2、tabs的外观选项

collapsible：允许折叠对应的内容；

disabled：使用数组来禁用哪个选项卡的索引，（[0,1]表示禁用了前两个的索引）

event：表示触发tabs执行的事件类型（默认为click，可设置mouseover其他鼠标事件）；

active：默认展开哪个tab，对应的是数值。（比如active:1）

heightStyle：默认值为“content”

show：显示

hide：隐藏

3、tabs()方法的事件

create：当创建一个选项卡时激活此事件，有两个参数（event，ui），

对于ui参数，有两个子属性tab和panel，得到当前活动卡和内容选项的对象。

create:function(event,ui){
	alert($(ui.tab.get()).html());
	alert($(ui.panel.get()).html() );
}

activate:切换到另一个活动卡后触发，有两个参数：event，ui。

对于ui参数，有四个子属性，即oldTab、newTab、oldPanel、newPanel

beforeActivate：当切换到另一个活动卡之前触发。

load：当ajax加载一个文档后激活此事件。该方法有ui和event两个参数

对于ui参数，有两个子属性，即tab和panel，得到当前的活动卡和内容选项的对象。

beforeLoad：ajax远程加载文档前触发。

对于ui参数，有四个子属性，即tab和panel，jqXHR，ajaxSettings

（在jqXHR中常用的方法是success，ajaxSettings主要用于编写默认的属性）

4、tabs('action',param)方法

tabs('widget')——表示获取选项卡的jQuery对象

tabs('destory')——删除选项卡，直接阻断了tabs

tabs('refresh')——更新选项卡，比如高度

tabs('option',param)——获取options属性的值

tabs('option',param,value)——设置options属性的值 

5、tabs中on的用法

对于on()方法触发的选项卡事件

（1）tabsload：Ajax加载后触发

（2）tabsbeforeload：Ajax加载前触发

（3）tabsactivate：选项卡切换时触发

（4）tabsbeforeactivate：选项卡切换前触发

//ajax加载后触发
$('#tabs').on('tabsload',function(){
	alert('ajax加载后触发！');
});