快捷導(dǎo)航

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

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

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

Tabs 標(biāo)簽頁(yè)/選項(xiàng)卡

用$.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)記，每個(gè)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，我們同時(shí)捕捉 'onSelect' 事件。

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

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

增加新的 tab panel

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

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

獲取選中的 Tab

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

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

特性

名稱	類型	說明	默認(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 滾動(dòng)按鈕，滾動(dòng)的像素?cái)?shù)。	100
scrollDuration	number	每一個(gè)滾動(dòng)動(dòng)畫應(yīng)該持續(xù)的毫秒數(shù)。	400
tools	array	右側(cè)工具欄，每個(gè)工具選項(xiàng)都和 Linkbutton 一樣。	null

事件

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

方法

名稱	參數(shù)	說明
options	none	返回 tabs options。
tabs	none	返回全部 tab panel。
resize	none	調(diào)整 tabs 容器的尺寸并做布局。
add	options	增加一個(gè)新的 tab panel，options 參數(shù)是一個(gè)配置對(duì)象，更多詳細(xì)信息請(qǐng)參見 tab panel 特性。
close	title	關(guān)閉一個(gè) tab panel，title 參數(shù)是指被關(guān)閉的 panel。
getTab	title	獲取指定的 tab panel。
getSelected	none	獲取選中的 tab panel。
select	title	選擇一個(gè) tab panel。
exists	title	是指是否存在特定的 panel。
update	param	更新指定的 tab panel，param 包含兩個(gè)特性： 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 特性時(shí)緩存這個(gè) 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 時(shí)，tab panel 將顯示一個(gè)關(guān)閉按鈕，點(diǎn)擊它就能關(guān)閉這個(gè)tab panel。	false
selected	boolean	當(dāng)設(shè)置為 true 時(shí)，tab panel 將被選中。	false