EasyUI标签(Tabs)用法

1、用法示例创建tabs经由标记创建Tabs从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把easyui-tabs类添加到标记,每个tabpanel经由子标记被创建，其用法与Panel一样。tab1tab2tab310.11.编程创建Tabs现在我们编程创建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就不用背景容器图片来呈现tab条。falsefitbooleanTrue就设置Tabs容器的尺寸以适应它的父容器。falseborderbooleanTrue就显示Tabs容器边

3、框。truescrollincrementnumber每按一次tab滚动按钮，滚动的像素数。100scrollDurationnumber每一个滚动动画应该持续的毫秒数。400toolsarray右侧工具栏，每个工具选项都和Linkbutton一样。null事件名称参数说明onLoadpanel当一个ajaxtabpanel完成加载远程数据时触发。onSelecttitle当用户选择一个tabpanel时触发。onBeforeClosetitle当一个tabpanel被关闭前触发，返回false就取消关闭动作。onClosetitle当用户关闭一个tabpanel时触发。onAddtitle当

4、一个新的tabpanel被添加时触发。onUpdatetitle当一个tabpanel被更新时触发。onContextMenue,title当一个tabpanel被右键点击时触发。方法名称参数说明optionsnone返回tabsoptionsotabsnone返回全部tabpaneloresizenone调整tabs容器的尺寸并做布局。addoptions增加一个新的tabpanel,options参数是一个配置对象，更多详细信息请参见tabpanel特性。closetitle关闭一个tabpanel，title参数是指被关闭的panel。getTabtitle获取指定的tabpanel。g

5、etSelectednone获取选中的tabpaneloselecttitle选择一个tabpaneloexiststitle是指是否存在特定的paneloupdateparam更新指定的tabpanel,param包含两个特性：tab:被更新的tabpanelooptions：panel的options。TabPanelTabpanel-寺性被定义在panel组件里，下面是一些常用的特性。名称类型说明默认值titlestringTabpanel的标题文字。contentstringTabpanel的内容。hrefstring加载远程内容来填充tabpanel的URL。nullcacheboo

6、leanTrue就在设定了有效的href特性时缓存这个tabpanelotrueiconCIsstring显示在tabpanel标题上的图标的CSS类。nullwidthnumberTabpanel的宽度。autoheightnumberTabpanel的高度。auto一些附加的特性名称类型说明默认值closableboolean当设置为true时，tabpanel将显示一个关闭按钮，点击它就能关闭这个tabpanelofalseselectedboolean当设置为true时，tabpanel将被选中。falsejQueryEasyU标签仃abs）用法发表于2010年4月17日面板功能ad#

7、content这里介绍一下标签(Tabs)用法以及参数，首先我们可以先看可以做什么，下图就是一个面板的实例。(查看演示)TablT：b2sxT：b3T：b4withifr：dJTie*T：b5withsubt：be同样我们来通过一个小例子来学习一下这些参数，HTML代码如下:2,tab14tab2tab310参数参数名参数width数字height数字idSeed数字默认值autoautoplain布尔如果为ture标签没有背景图片false11然后按照jQueryEasyUI框架使用文档包含必要文件后，只要在$(function();里添加一行代码来生成面板：12$(#tt).tabs(op

8、tions);也可以给面板函数添加一些参数：1$(#tt).tabs(add,title:NewTab,content:TabBody,closable:true);描述标签容器的宽度标签容器的高度ThebaseidseedtogeneratetabpanelsDOMidattribute.fit如果为ture则设置标签的大小以适应它的falseborder布尔如果为true则显示标签容器的边框true布尔容器的父容器scrollIncrement100数字滚动按钮每次被按下时滚动的像素值scrollDuration400数字每次滚动持续的毫秒数事件事件名参数描述当一个AJAX标签加载远程数据

9、完成时被触发，参数和onLoadargumentsjQuery.ajax成功返回的回调函数相同onSelecttitle当用户选择一个标签面板时被触发onClosetitle当用户关闭一个标签面板时被触发方法方法名参数描述resizenone调整标签容器的大小和布局addoptions添加新标签面板，可选参数是一个配置对象，详细信息可以查看下面的标签面板属性closetitle关闭一个标签面板，标题参数表明被关闭的面板selecttitle选择一个标签面板克SUNNy佥佥佥标签面板属性属性名类型描述默认值id字符串标签面板的ID属性nulltitle字符串标签面板的文本标题content字符串

10、标签面板的主体内容href字符串填充标签内容的远程URL地址null如果为true,当设置href时，对标签面板进行缓cachetrue布尔存icon字符串标签面板上标题的图标CSS类null如果为true，标签面板会显示出关闭按钮，点击closablefalse布尔可以关闭选项卡面板。selected布尔如果为true，标签标签面板将被选中falsewidthauto数字标签面板的宽度heightauto数字标签面板的高度演示existstitle指示特定的标签是否存在jQueryEasyUIAPILayout(Tabs):rainweb:2010-04-15TabstabA*easyui.

11、cssicon.cssjquery-14.2minjsjquery.easyui.minjsHTML代码2,tabl4tab2tab30JQuery代码2/创建一个标签容器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调整容器的布局addoptions添加一个新的标签面板,选择一个配置对象参数,看标签面板的特性说明closetitle关闭一个标签面板,标题参数显示的面板被关闭。selecttitle选中一个标签面板existstitle指明特殊面板显示存在。TabP