快捷導(dǎo)航

jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁/選項卡

更新時間：2011年10月01日 00:33:42 作者：

jQuery EasyUI API 中文文檔 - 標(biāo)簽頁/選項卡（Tabs）,學(xué)習(xí)jQuery EasyUI的朋友可以參考下。

Tabs 標(biāo)簽頁/選項卡

用$.fn.tabs.defaults重寫defaults。

依賴
panel
linkbutton
用法示例
創(chuàng)建tabs
1、經(jīng)由標(biāo)記創(chuàng)建Tabs
從標(biāo)記創(chuàng)建Tabs更容易，我們不需要寫任何JavaScript代碼。記住把 'easyui-tabs' 類添加到<div/>標(biāo)記，每個tab panel 經(jīng)由子<div/>標(biāo)記被創(chuàng)建，其用法與Panel一樣。

復(fù)制代碼代碼如下:

 
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
<div title="Tab1" style="padding:20px;display:none;"> 
tab1 
</div> 
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> 
tab2 
</div> 
<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;"> 
tab3 
</div> 
</div> 

2. 編程創(chuàng)建Tabs
現(xiàn)在我們編程創(chuàng)建 Tabs，我們同時捕捉 'onSelect' 事件。

復(fù)制代碼代碼如下:

 
$('#tt').tabs({ 
border:false, 
onSelect:function(title){ 
alert(title+' is selected'); 
} 
}); 

增加新的 tab panel

復(fù)制代碼代碼如下:

 
// 增加一個新的 tab panel 
$('#tt').tabs('add',{ 
title:'New Tab', 
content:'Tab Body', 
closable:true 
}); 

獲取選中的 Tab

復(fù)制代碼代碼如下:

 
// 獲取選中的 tab panel 和它的 tab 對象 
var pp = $('#tt').tabs('getSelected'); 
var tab = pp.panel('options').tab; // 相應(yīng)的 tab 對象 

特性

名稱	類型	說明	默認(rèn)值
width	number	Tabs 容器的寬度。	auto
height	number	Tabs 容器的高度。	auto
plain	boolean	True 就不用背景容器圖片來呈現(xiàn) tab 條。	false
fit	boolean	True 就設(shè)置 Tabs 容器的尺寸以適應(yīng)它的父容器。	false
border	boolean	True 就顯示 Tabs 容器邊框。	true
scrollIncrement	number	每按一次tab 滾動按鈕，滾動的像素數(shù)。	100
scrollDuration	number	每一個滾動動畫應(yīng)該持續(xù)的毫秒數(shù)。	400
tools	array	右側(cè)工具欄，每個工具選項都和 Linkbutton 一樣。	null

事件

名稱	參數(shù)	說明
onLoad	panel	當(dāng)一個 ajax tab panel 完成加載遠(yuǎn)程數(shù)據(jù)時觸發(fā)。
onSelect	title	當(dāng)用戶選擇一個 tab panel 時觸發(fā)。
onBeforeClose	title	當(dāng)一個 tab panel 被關(guān)閉前觸發(fā)，返回 false 就取消關(guān)閉動作。
onClose	title	當(dāng)用戶關(guān)閉一個 tab panel 時觸發(fā)。
onAdd	title	當(dāng)一個新的 tab panel 被添加時觸發(fā)。
onUpdate	title	當(dāng)一個 tab panel 被更新時觸發(fā)。
onContextMenu	e, title	當(dāng)一個 tab panel 被右鍵點擊時觸發(fā)。

方法

名稱	參數(shù)	說明
options	none	返回 tabs options。
tabs	none	返回全部 tab panel。
resize	none	調(diào)整 tabs 容器的尺寸并做布局。
add	options	增加一個新的 tab panel，options 參數(shù)是一個配置對象，更多詳細(xì)信息請參見 tab panel 特性。
close	title	關(guān)閉一個 tab panel，title 參數(shù)是指被關(guān)閉的 panel。
getTab	title	獲取指定的 tab panel。
getSelected	none	獲取選中的 tab panel。
select	title	選擇一個 tab panel。
exists	title	是指是否存在特定的 panel。
update	param	更新指定的 tab panel，param 包含兩個特性： tab：被更新的 tab panel。 options：panel 的 options。

Tab Panel

Tab panel 特性被定義在 panel 組件里，下面是一些常用的特性。

名稱	類型	說明	默認(rèn)值
title	string	Tab panel 的標(biāo)題文字。
content	string	Tab panel 的內(nèi)容。
href	string	加載遠(yuǎn)程內(nèi)容來填充 tab panel 的 URL。	null
cache	boolean	True 就在設(shè)定了有效的 href 特性時緩存這個 tab panel。	true
iconCls	string	顯示在tab panel 標(biāo)題上的圖標(biāo)的 CSS 類。	null
width	number	Tab panel 的寬度。	auto
height	number	Tab panel 的高度。	auto

一些附加的特性

名稱	類型	說明	默認(rèn)值
closable	boolean	當(dāng)設(shè)置為 true 時，tab panel 將顯示一個關(guān)閉按鈕，點擊它就能關(guān)閉這個tab panel。	false
selected	boolean	當(dāng)設(shè)置為 true 時，tab panel 將被選中。	false