@author YHC

$.fn.tabs.defaults覆蓋默認值

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

使用示例:

創建示例

創建 tabs

1.創建tabs通過標記;

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

[html]

tab1

tab2

tab3

tab1

tab2

tab3

2.通過編程的方式創建tabs

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

[javascript] view plaincopyprint?$('#tt').tabs({

border:false,

onSelect:function(title){

alert(title+' is selected');

}

});

$('#tt').tabs({

border:false,

onSelect:function(title){

alert(title+' is selected');

}

}); 添加一個新的 tab panel

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

[javascript] view plaincopyprint?// add a new tab panel

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

title:'New Tab',

content:'Tab Body',

closable:true,

tools:[{

iconCls:'icon-mini-refresh',

handler:function(){

alert('refresh');

}

}]

});

// add a new tab panel

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

title:'New Tab',

content:'Tab Body',

closable:true,

tools:[{

iconCls:'icon-mini-refresh',

handler:function(){

alert('refresh');

}

}]

});? 得到選中 Tab

[javascript] view plaincopyprint?// 得到當前選中的tab panel和他的tab對象

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

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

// 得到當前選中的tab panel和他的tab對象

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

var tab = pp.panel('options').tab;??? // 對應的tab對象屬性

Name Type Description Default

width number tab容器的寬度 . auto

height number tab容器的高度. auto

plain boolean 如果設置True渲染tab 沒有背景圖片. false

fit boolean 如果設置True將設置tabs容器的大小,適應父容器大小. false

border boolean True顯示tabs容器border. true

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

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

tools array,selector 右邊的工具欄. 可用值:

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

2. 一個選擇器指向

代碼示例:

使用數組定義工具.

$('#tt').tabs({

tools:[{

iconCls:'icon-add',

handler:function(){

alert('add')

}

},{

iconCls:'icon-save',

handler:function(){

alert('save')

}

}]

});

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

$('#tt').tabs({

tools:'#tab-tools'

});

null

事件

Name Parameters Description

onLoad panel ajax tab panel加載遠程服務器端數據結束時候觸發.

onSelect title,index 當用戶選中一個tab panel的時候觸發.

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

$('#tt').tabs({

onBeforeClose: function(title){

return confirm('Are you sure you want to close ' + title);

}

});

// using the async confirm dialog

$('#tt').tabs({

onBeforeClose: function(title,index){

var target = this;

$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){

if (r){

var opts = $(target).tabs('options');

var bc = opts.onBeforeClose;

opts.onBeforeClose = function(){};? // allowed to close now

$(target).tabs('close',index);

opts.onBeforeClose = bc;? // restore the event function

}

});

return false;?// prevent from closing

}

});

onClose title,index 當用戶關閉一個tab panel的時候觸發.

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

onUpdate title,index 當一個tab panel更新的時候觸發.

onContextMenu e, title,index 當在一個tab panel上右鍵的時候觸發.

方法

Name Parameter Description

options none 返回 tab panel 的 options選項.

tabs none 返回所有的 tab panel對象.

resize none 調整tab 容器的大小布局.

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

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

// 代碼示例 添加一個新的補選中的tab panel$('#tt').tabs('add',{

title: 'new tab',

selected: false

//...

});

close which 關閉一個 tab panel, 'which' 參數可以是tab panel的title(標題)和index(下標)然后將其關閉.

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

getTabIndex tab 得到一個特定的tab panel的下標.

getSelected none 得到選中的tab panel. 以下示例展示 如果得到當前選擇的tab panel的下標.

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

var index = $('#tt').tabs('getTabIndex',tab);

alert(index);//輸出下標

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

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

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

tab: 需要更新的tab panel.

options: panel options配置選項.

示例代碼:

//更新選擇的panel的內容和標題

var tab = $('#tt').tabs('getSelected');? //得到選中的panel

$('#tt').tabs('update', {

tab: tab,

options: {

title: 'New Title',

href: 'get_content.php'? // 請求新的內容的URL

}

});

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

示例代碼:

$('#tt').tabs('enableTab', 1);?//啟用第二個tab panel

$('#tt').tabs('enableTab', 'Tab2');//啟用標題為'Tab2'的tab panel

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

示例代碼:

$('#tt').tabs('disableTab', 1);?//禁用第二個tab panel.

Tab Panel

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

Name Type Description Default

id string tab panel的id屬性. null

title string tab panel 標題文本.

content string tab panel 內容.

href string 一個URL加載遠程數據內容來填充tab panel. null

cache boolean True 將緩存 tab panel, 當href被設置時該選項有效. true

iconCls string 一個icon 的css樣式顯示在tab panel標題上. null

width number? tab panel寬度. auto

height number tab panel高度. auto

一些新增的屬性.

Name Type Description Default

closable boolean 當設置為 true時, tab panel將顯示一個可關閉按鈕,可以點擊關閉tab panel. false

selected boolean 當設置為true時, tab panel將被選中. false

作者：yhc13429826359

總結

以上是生活随笔為你收集整理的easyui 转换 html5,easyUI Tabs的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。