1. 程式人生 > >jQuery EasyUI API 中文文件

jQuery EasyUI API 中文文件

Tabs  標籤頁/選項卡

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

依賴

  • panel
  • linkbutton

用法示例

建立tabs

1. 經由標記建立Tabs

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

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

2.  <divtitle="Tab1"style=

"padding:20px;display:none;">

3.          tab1   

4.  </div>

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

6.          tab2   

7.  </div>

8.  <divtitle="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

6.  });  

獲取選中的 Tab

1.   // 獲取選中的 tab panel 和它的 tab 物件 

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

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

特性

名稱

型別

說明

預設值

width

number

Tabs 容器的寬度。

auto

height

number

Tabs 容器的高度。

auto

plain

boolean

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

false

fit

boolean

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

false

border

boolean

True 就顯示 Tabs 容器邊框。

true

scrollIncrement

number

每按一次tab 滾動按鈕,滾動的畫素數。

100

scrollDuration

number

滾動動應該的毫秒數。

400

tools

array

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

null

事件

名稱

引數

說明

onLoad

panel

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

onSelect

title

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

onBeforeClose

title

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

onClose

title

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

onAdd

title

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

onUpdate

title

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

onContextMenu

e, title

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

方法

名稱

引數

說明

options

none

返回 tabs options。

tabs

none

返回全部 tab panel。

resize

none

調整 tabs 容器的尺寸並做佈局。

add

options

增加一個新的 tab panel,options 引數是一個配置物件,更多詳細資訊請參見  tab panel 特性。

close

title

關閉一個 tab panel,title 引數是指被關閉的 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 元件裡,下面是一些常用的特性。

名稱

型別

說明

預設值

title

string

Tab panel 的標題文字。

content

string

Tab panel 的內容。

href

string

載入遠端內容來填充 tab panel 的 URL。

null

cache

boolean

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

true

iconCls

string

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

null

width

number

Tab panel 的寬度。

auto

height

number

Tab panel 的高度。

auto

一些附加的特性

名稱

型別

說明

預設值

closable

boolean

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

false

selected

boolean

當設定為 true 時,tab panel 將被選中。

false