jQuery EasyUI API 中文文檔 - 标簽頁/頁籤（Tabs）

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

依賴

panel

linkbutton

用法示例

建立tabs

1. 經由标記建立Tabs

從标記建立Tabs更容易，我們不需要寫任何JavaScript代碼。記住把 'easyui-tabs' 類添加到<div/>标記，每個tab panel 經由子<div/>标記被建立，其用法與Panel一樣。

1. <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

2. <div title="Tab1" style="padding:20px;display:none;">

3.         tab1  

4. </div>

5. <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">

6.         tab2  

7. </div>

8. <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">

9.         tab3  

10. </div>

11. </div>

2. 程式設計建立Tabs

現在我們程式設計建立 Tabs，我們同時捕捉 'onSelect' 事件。

1. $('#tt').tabs({  

2.     border:false,  

3.     onSelect:function(title){  

4.         alert(title+' is selected');  

5.     }  

6. }); 

增加新的 tab panel

1. // 增加一個新的 tab panel

2. $('#tt').tabs('add',{  

3.     title:'New Tab',  

4.     content:'Tab Body',  

5.     closable:true

擷取選中的 Tab

1. // 擷取選中的 tab panel 和它的 tab 對象 

2. var pp = $('#tt').tabs('getSelected');  

3. var tab = pp.panel('options').tab;    // 相應的 tab 對象 

特性

名稱

類型

說明

預設值

width

number

Tabs 容器的寬度。

auto

height

Tabs 容器的高度。

plain

boolean

True 就不用背景容器圖檔來呈現 tab 條。

false

fit

True 就設定 Tabs 容器的尺寸以适應它的父容器。

border

True 就顯示 Tabs 容器邊框。

true

scrollIncrement

每按一次tab 滾動按鈕，滾動的像素數。

100

scrollDuration

每一個滾動動畫應該持續的毫秒數。

400

tools

array

右側工具欄，每個工具選項都和 Linkbutton 一樣。

null

事件

參數

onLoad

當一個 ajax tab panel 完成加載遠端資料時觸發。

onSelect

title

當使用者選擇一個 tab panel 時觸發。

onBeforeClose

當一個 tab panel 被關閉前觸發，傳回 false 就取消關閉動作。

onClose

當使用者關閉一個 tab panel 時觸發。

onAdd

當一個新的 tab panel 被添加時觸發。

onUpdate

當一個 tab panel 被更新時觸發。

onContextMenu

e, title

當一個 tab panel 被右鍵點選時觸發。

方法

options

none

傳回 tabs options。

tabs

傳回全部 tab panel。

resize

調整 tabs 容器的尺寸并做布局。

add

增加一個新的 tab panel，options 參數是一個配置對象，更多詳細資訊請參見 tab panel 特性。

close

關閉一個 tab panel，title 參數是指被關閉的 panel。

getTab

擷取指定的 tab panel。

getSelected

擷取選中的 tab panel。

select

選擇一個 tab panel。

exists

是指是否存在特定的 panel。

update

param

更新指定的 tab panel，param 包含兩個特性：

tab：被更新的 tab panel。

options：panel 的 options。

Tab Panel

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

string

Tab panel 的标題文字。

content

Tab panel 的内容。

href

加載遠端内容來填充 tab panel 的 URL。

cache

True 就在設定了有效的 href 特性時緩存這個 tab panel。

iconCls

顯示在tab panel 标題上的圖示的 CSS 類。

Tab panel 的寬度。

Tab panel 的高度。

一些附加的特性

closable

當設定為 true 時，tab panel 将顯示一個關閉按鈕，點選它就能關閉這個tab panel。

selected

當設定為 true 時，tab panel 将被選中。