easyUI Tabs

@author YHC

$.fn.tabs.defaults覆寫預設值

tabs顯示一個panel的集合,每一次僅僅隻是顯示一個tab panel,所有tab panel都有标題和一些小的工具按鈕,包含close按鈕和其他自定義按鈕;

使用示例:

1.建立tabs通過标記;

從标記建立tabs非常簡單,我們不需要寫任何的javascript代碼,記得添加"easyui-panel"樣式給div标記,每個tab panel的建立通過子div标記,使用和panel是一樣的.

2.通過程式設計的方式建立tabs

現在我們用程式設計的方式建立tabs,并且捕捉"onSelect"事件;

添加一個新的tab panel和小工具,小工具的icon(8*8)放在關閉按鈕前面;

Name

Type

Description

Default

width

number

tab容器的寬度 .

auto

height

tab容器的高度.

plain

boolean

如果設定True渲染tab 沒有背景圖檔.

false

fit

如果設定True将設定tabs容器的大小,适應父容器大小.

border

True顯示tabs容器border.

true

scrollIncrement

每次tab滾動按鈕被按下時滾動的一個像素值 

100

scrollDuration

每一個滾動動作持續的時間的毫秒值.

400

tools

array,selector

右邊的工具欄. 可用值:

1. 一個指定的工具數組, 每個tool的選項和linkbutton相同.

2. 一個選擇器指向<div/>包含的工具集合.

代碼示例:

使用數組定義工具.

使用一個存在的DOM容器哦定義工具.

null

Parameters

onLoad

panel

ajax tab panel加載遠端伺服器端資料結束時候觸發.

onSelect

title,index

當使用者選中一個tab panel的時候觸發.

onBeforeClose

在tab panel關閉之前觸發,該方法傳回false将取消關閉動作. 下面的示例展示,如何顯示一個confirm對話框在關閉tabpanel關閉之前.

onClose

當使用者關閉一個tab panel的時候觸發.

onAdd

當一個新的tab panel被添加進來的時候觸發.

onUpdate

當一個tab panel更新的時候觸發.

onContextMenu

e, title,index

當在一個tab panel上右鍵的時候觸發.

Parameter

options

none

傳回 tab panel 的 options選項.

tabs

傳回所有的 tab panel對象.

resize

調整tab 容器的大小布局.

add

添加一個新的tab panel, 這個 options的參數是一個配置對象, 請見tab panel 屬性獲得更多詳細資訊. 當添加一個新的tab panel的時候,它将成為目前被選中panel. 

添加一個不選中的tab panel,請記住設定 'selected' 屬性為false.

close

which

關閉一個 tab panel, 'which' 參數可以是tab panel的title(标題)和index(下标)然後将其關閉.

getTab

得到一個特定的 tab panel,  'which'參數可以是tab panel的title(标題)和index(下标)

getTabIndex

tab

得到一個特定的tab panel的下标.

getSelected

得到選中的tab panel. 以下示例展示 如果得到目前選擇的tab panel的下标.

select

選中一個 tab panel, 'which' 參數可以是tab panel的title(标題)或者index(下标) .

exists

指明如果一個特定的tab panel是存在的, 'which' 參數可以是tab panel的title(标題)或者index(下标).

update

param

更新特定的 tab panel,param 參數包含2個屬性:

tab: 需要更新的tab panel.

options: panel options配置選項.

示例代碼:

enableTab

啟用一個特定的 tab panel,'which' 參數可以是tab panel的title(标題)或者是index(下标). 這個方法從1.3版本以後可用.

disableTab

禁用特定的 tab panel, 'which' 參數可以是tab panel的title(标題)或者index(下标).這個方法從1.3版本開始可用.

tab panel屬性是定義在panel元件裡,下面是一些常見的屬性:

id

string

tab panel的id屬性.

title

tab panel 标題文本.

content

tab panel 内容.

href

一個URL加載遠端資料内容來填充tab panel.

cache

True 将緩存 tab panel, 當href被設定時該選項有效.

iconCls

一個icon 的css樣式顯示在tab panel标題上.

 tab panel寬度.

tab panel高度.

一些新增的屬性.

closable

當設定為 true時, tab panel将顯示一個可關閉按鈕,可以點選關閉tab panel.

selected

當設定為true時, tab panel将被選中.



以上如果有錯誤資訊請指出,thanks!