选项卡:是一种能提供给用户在同一个页面切换不同内容的ui。尤其是在页面布局紧凑的页面上。
-
使用table
$('#tabs').tabs();
-
tabs外观选项和方法
HTML文件:
<div id="tabs">
<ul>
<li><a href="#tab1">tab1</a></li><!-- 当点击此按钮是,显示tab_content1内容,采用方式为#加上一个内容的id -->
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>
<div id="tab1"><p>tab-content1</p><p>tab-content1</p><p>tab-content1</p></div>
<div id="tab2">tab-content2</div>
<div id="tab3">tab-content3</div>
</div>
JS文件:
$(function(){
$('#tabs').tabs({
collapsible:true,//允许折叠,false不允许折叠
disabled:[0], //选项卡禁用,true时,全部禁用
event:mouseover,//原来为点击才可以切换,当为mouse时,鼠标滑过也可以切换
active:1,//默认展开第几个tab,当为false时,默认折叠
heightStyle:"auto",//默认值为content,根据内容的高度对话框的高度变化;当为auto时,所有对话框会以最高的为标准;当值为fill时,可以填充一定高度
show:true,//淡入淡出效果
hide:true//淡入淡出效果
});
});
CSS文件:
#tabs{
margin: 200px;
border: 0;
}
#tab1,#tab2,#tab3{
border:1px solid#aaa;
border-top: none;
position: relative;
top:-2px;}
-
选项的事件
$('#tabs').tabs({
create:function(event,ui){
//alert('创建tab时触发');
//alert($(ui.tab.get()).html());//ui有两个子属性tab和panel,得到当前活动卡和内容选项的对象
},
activate:function(event,ui){
//alert("change");//切换之后触发,启动该事件 //alert($(ui.oldTab.get()).html());
//alert($(ui.newTab.get()).html());
//alert($(ui.oldPanel.get()).html());
//alert($(ui.newPanel.get()).html()); },
beforeActivate:function(){
//切换活动卡之前启动该事件
alert("change");
},
});
-
ajax远程加载
index.html
<div id="tabs">
<ul>
<li><a href="tab1.html">tab1</a></li><!-- 当点击此按钮是,显示tab_content1内容,采用方式为#加上一个内容的id -->
<li><a href="tab2.html">tab2</a></li>
<li><a href="tab3.html">tab3</a></li>
</ul>
</div>
tab1.html:
tab1-content
tab2.html:
tab2-content
js文件代码不变 同上
远程加载的两个事件:load()和beforeLoad()
$('#tabs').tabs({
collapsible:true,//允许折叠,false不允许折叠
load:function(event,ui){
//加载一个文档后激活此事件,有两个子属性,tab和panel
alert("after ajax");
},
beforeLoad:function(event,ui){
//ajax加载一个文档之前激活
//有四个子属性:tab、panel、jqXHR(得到ajax属性)、ajaxSettings
alert("before");
ui.jqXHR.success(function(responseText){
alert(responseText);
});
ui.ajaxSettings.url='tab2.html';//设置一些默认属性,单击每一个选项卡显示的都是tab2.html内容
}
});
-
tabs(‘action’,param) 方法
$('#tabs').tabs('disable');//禁用选项卡所有选项
$('#tabs').tabs('disable',0);//禁用第一个选项卡
$('#tabs').tabs('enable',0);//启用第一个选项卡
$('#tabs').tabs('enable');//启用所有选项卡
$('#button').click(function(){
$('#tabs').tabs('load',0);//表示更新第一个选项卡,可以 进行局部刷新
});