EasyUI標簽(Tabs)用法

1、用法示例創(chuàng)建tabs經(jīng)由標記創(chuàng)建Tabs從標記創(chuàng)建Tabs更容易，我們不需要寫任何JavaScript代碼。記住把easyui-tabs類添加到標記,每個tabpanel經(jīng)由子標記被創(chuàng)建，其用法與Panel一樣。tab1tab2tab310.11.編程創(chuàng)建Tabs現(xiàn)在我們編程創(chuàng)建Tabs，我們同時捕捉onSelect事件。$(#tt).tabs(2.border:false,onSelect:function(title)alert(title+isselected);5.6.);增加新的tabpanel/增加一個新的tabpanel$(#tt).tabs(add,title:NewTab,c

2、ontent:TabBody,closable:true6.);獲取選中的Tab1./獲取選中的tabpanel和它的tab對象varpp=$(#tt).tabs(getSelected);vartab=pp.panel(options).tab;/相應的tab對象特性名稱類型說明默認值widthnumberTabs容器的寬度。autoheightnumberTabs容器的高度。autoplainbooleanTrue就不用背景容器圖片來呈現(xiàn)tab條。falsefitbooleanTrue就設置Tabs容器的尺寸以適應它的父容器。falseborderbooleanTrue就顯示Tabs容器邊

3、框。truescrollincrementnumber每按一次tab滾動按鈕，滾動的像素數(shù)。100scrollDurationnumber每一個滾動動畫應該持續(xù)的毫秒數(shù)。400toolsarray右側工具欄，每個工具選項都和Linkbutton一樣。null事件名稱參數(shù)說明onLoadpanel當一個ajaxtabpanel完成加載遠程數(shù)據(jù)時觸發(fā)。onSelecttitle當用戶選擇一個tabpanel時觸發(fā)。onBeforeClosetitle當一個tabpanel被關閉前觸發(fā)，返回false就取消關閉動作。onClosetitle當用戶關閉一個tabpanel時觸發(fā)。onAddtitle當

4、一個新的tabpanel被添加時觸發(fā)。onUpdatetitle當一個tabpanel被更新時觸發(fā)。onContextMenue,title當一個tabpanel被右鍵點擊時觸發(fā)。方法名稱參數(shù)說明optionsnone返回tabsoptionsotabsnone返回全部tabpaneloresizenone調(diào)整tabs容器的尺寸并做布局。addoptions增加一個新的tabpanel,options參數(shù)是一個配置對象，更多詳細信息請參見tabpanel特性。closetitle關閉一個tabpanel，title參數(shù)是指被關閉的panel。getTabtitle獲取指定的tabpanel。g

5、etSelectednone獲取選中的tabpaneloselecttitle選擇一個tabpaneloexiststitle是指是否存在特定的paneloupdateparam更新指定的tabpanel,param包含兩個特性：tab:被更新的tabpanelooptions：panel的options。TabPanelTabpanel-寺性被定義在panel組件里，下面是一些常用的特性。名稱類型說明默認值titlestringTabpanel的標題文字。contentstringTabpanel的內(nèi)容。hrefstring加載遠程內(nèi)容來填充tabpanel的URL。nullcacheboo

6、leanTrue就在設定了有效的href特性時緩存這個tabpanelotrueiconCIsstring顯示在tabpanel標題上的圖標的CSS類。nullwidthnumberTabpanel的寬度。autoheightnumberTabpanel的高度。auto一些附加的特性名稱類型說明默認值closableboolean當設置為true時，tabpanel將顯示一個關閉按鈕，點擊它就能關閉這個tabpanelofalseselectedboolean當設置為true時，tabpanel將被選中。falsejQueryEasyU標簽仃abs）用法發(fā)表于2010年4月17日面板功能ad#

7、content這里介紹一下標簽(Tabs)用法以及參數(shù)，首先我們可以先看可以做什么，下圖就是一個面板的實例。(查看演示)TablT：b2sxT：b3T：b4withifr：dJTie*T：b5withsubt：be同樣我們來通過一個小例子來學習一下這些參數(shù)，HTML代碼如下:2,tab14tab2tab310參數(shù)參數(shù)名參數(shù)width數(shù)字height數(shù)字idSeed數(shù)字默認值autoautoplain布爾如果為ture標簽沒有背景圖片false11然后按照jQueryEasyUI框架使用文檔包含必要文件后，只要在$(function();里添加一行代碼來生成面板：12$(#tt).tabs(op

8、tions);也可以給面板函數(shù)添加一些參數(shù)：1$(#tt).tabs(add,title:NewTab,content:TabBody,closable:true);描述標簽容器的寬度標簽容器的高度ThebaseidseedtogeneratetabpanelsDOMidattribute.fit如果為ture則設置標簽的大小以適應它的falseborder布爾如果為true則顯示標簽容器的邊框true布爾容器的父容器scrollIncrement100數(shù)字滾動按鈕每次被按下時滾動的像素值scrollDuration400數(shù)字每次滾動持續(xù)的毫秒數(shù)事件事件名參數(shù)描述當一個AJAX標簽加載遠程數(shù)據(jù)

9、完成時被觸發(fā)，參數(shù)和onLoadargumentsjQuery.ajax成功返回的回調(diào)函數(shù)相同onSelecttitle當用戶選擇一個標簽面板時被觸發(fā)onClosetitle當用戶關閉一個標簽面板時被觸發(fā)方法方法名參數(shù)描述resizenone調(diào)整標簽容器的大小和布局addoptions添加新標簽面板，可選參數(shù)是一個配置對象，詳細信息可以查看下面的標簽面板屬性closetitle關閉一個標簽面板，標題參數(shù)表明被關閉的面板selecttitle選擇一個標簽面板克SUNNy僉僉僉標簽面板屬性屬性名類型描述默認值id字符串標簽面板的ID屬性nulltitle字符串標簽面板的文本標題content字符串

10、標簽面板的主體內(nèi)容href字符串填充標簽內(nèi)容的遠程URL地址null如果為true,當設置href時，對標簽面板進行緩cachetrue布爾存icon字符串標簽面板上標題的圖標CSS類null如果為true，標簽面板會顯示出關閉按鈕，點擊closablefalse布爾可以關閉選項卡面板。selected布爾如果為true，標簽標簽面板將被選中falsewidthauto數(shù)字標簽面板的寬度heightauto數(shù)字標簽面板的高度演示existstitle指示特定的標簽是否存在jQueryEasyUIAPILayout(Tabs):rainweb:2010-04-15TabstabA*easyui.

11、cssicon.cssjquery-14.2minjsjquery.easyui.minjsHTML代碼2,tabl4tab2tab30JQuery代碼2/創(chuàng)建一個標簽容器13$(#tt).tabs(options);74/增加一個tab面板16$(#tt).tabs(add,title:NewTab,8content:TabBody,8content:TabBody,closable:true);TabsContainernuwidthmb標簽容器ernuheightmb標簽容器ernuidSeedmb應該是生erbooplainleatruenboofitleatruenbooborder

12、lea標簽容器nnuscrollIncrmb標簽卷按ementerautoautoid0falsefalsetrue100nuscrollDurmb400ationerjQuery.ajaxTabsContainerajaxonLoadargumentsonSelecttitleonClosetitleTabsContainerresizenone調(diào)整容器的布局addoptions添加一個新的標簽面板,選擇一個配置對象參數(shù),看標簽面板的特性說明closetitle關閉一個標簽面板,標題參數(shù)顯示的面板被關閉。selecttitle選中一個標簽面板existstitle指明特殊面板顯示存在。TabP