EasyUI标签Tabs用法

1、用法示例创建tabs1.经由标记创建 Tabs从标记创建 Tabs 更容易，我们不需要写任何 JavaScript 代码。记住把easyui-tabs,类添加到div/标记,每个 tabpanel经由子div/标记被创建，其用法与 Panel 一样。1.9.tab310.11.2.编程创建 Tabs现在我们编程创建Tabs,我们同时捕捉,onSelect,事件。1.$(#tt).tabs(2.border:false,3.onSelect:function(title)4.alert(title+isselected);5.)6.);增加新的tabpanel1./增加一个新的 tabpanel

2、2.$(#tt).tabs(add,3.title:NewTab,4.content:TabBody,5.closable:true6.);获取选中的Tab1./获取选中的 tabpanel 和它的 tab 对象2.varpp=$(#tt).tabs(getSelected);3.vartab=pp.panel(options).tab;/相应的 tab 对象2.divtitle3.tab14.5.6.tab27.8.=Tab2closable=truestyle=overflow:auto;padding:20px;display:=Tab3iconCls=icon-reloadclosab

3、le=truestyle=padding:20px;display:none;特性名称类型说明默认值widthnumberTabs 容器的宽度。autoheightnumberTabs 容器的高度。autoplainbooleanTrue 就不用背景容器图片来呈现 tab 条。falsefitbooleanTrue 就设置 Tabs 容器的尺寸以适应它的父容器。falseborderbooleanTrue 就显示 Tabs 容器边框。truescrollincrementnumber每按一次 tab 滚动按钮，滚动的像素数。100scrollDurationnumber每一个滚动动画应该持续的

4、毫秒数。400toolsarray右侧工具栏，每个工具选项都和 Linkbutton 一样。null事件名称参数说明onLoadpanel当一个 ajaxtabpanel 完成加载远程数据时触发。onSelecttitle当用户选择一个 tabpanel 时触发。onBeforeClosetitle当一个 tabpanel 被关闭前触发，返回 false 就取消关闭动作。onClosetitle当用户关闭一个 tabpanel 时触发。onAddtitle当一个新的 tabpanel 被添加时触发。onUpdatetitle当一个 tabpanel 被更新时触发。onContextMenue,

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

6、el。existstitle是指是否存在特定的 panel。updateparam更新指定的 tabpanel,param 包含两个特性：tab:被更新的 tabpanel。options:panel 的 options。TabPanelTabpanel 特性被定义在 panel 组件里，下面是一些常用的特性。名称类型说明默认值titlestringTabpanel 的标题文字。contentstringTabpanel 的内容。hrefstring加载远程内容来填充 tabpanel 的 URL。nullcachebooleanTrue 就在设定了有效的 href 特性时缓存这个 tabpa

7、nel。trueiconClsstring显示在 tabpanel 标题上的图标的 CSS 类。nullwidthnumberTabpanel 的宽度。autoheightnumberTabpanel 的高度。auto一些附加的特性名称类型说明默认值closableboolean当设置为 true 时，tabpanel 将显示一个关闭按钮，点击它就能关闭这个tabpanel。falseselectedboolean当设置为 true 时，tabpanel 将被选中。falsejQueryEasyUI 标签（Tabs）用法发表于 2010 年 4 月 17 日ad#content这里介绍一下标签

8、（Tabs）用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。（查看演示）TabiTab2*jeTab3Tab4withiTab5withsubtahs1同样我们来通过一个小例子来学习一下这些参数，HTML代码如下:I3tab1、tab2S：.tab3,1.|然后按照jQueryEasyUI框架使用文档包含必要文件后，只要在$(function()里添加一行代码来生成面板：|.工$(#tt).tabs(options);也可以给面板函数添加一些参数：二$(#tt).tabs(add,.11title:NewTab,content:TabBody,closable:t

9、rue1);参数参数名参数描述默认值width数字标签容器的宽度autoheight数字标签容器的高度autoThebaseidseedtogeneratetabidSeed_panelsDOMidattribute.0数字plain.如果为ture标签没有背景图片false布尔);fit布尔border布尔scrollIncrementscrollDuration事件事件名onLoadargumentsonSelecttitleonClosetitle方法名resizenoneaddoptionsclosetitleselecttitle如果为ture则设置标签的大小以适应它的容器的父容器如

10、果为true则显示标签容器的边框滚动按钮每次被按下时滚动的像素值每次滚动持续的毫秒数falsetrue100400当一个AJAX标签加载远程数据完成时被触发,jQuery.ajax成功返回的回调函数相同当用户选择一个标签面板时被触发当用户关闭一个标签面板时被触发调整标签容器的大小和布局添加新标签面板， 可选参数是一个配置对象,以查看下面的标签面板属性关闭一个标签面板，标题参数表明被关闭的面板选择一个标签面板参数和详细信息可existstitle指不特定的标签是否存在标签面板属性属性名类型描述默认值id字符串标签面板的ID属性nulltitle字符串标签囿板的文本标题content字符串标签面板

11、的主体内容href字符串填充标签内容的远程URL地址null如果为true,当设置href时，对标签面板进行缓cache布尔存trueicon字符串标签面板上标题的图标CSS类null如果为true,标签面板会显TK出关闭按钮，点击closable布尔可以关闭选项卡面板。falseselected布尔如果为true,标签标签面板将被选中falsewidth数字标签面板的宽度autoheight数字标签面板的局度auto演示总结发布jQueryEasyUI中文API-Layout(Tabs)作者:rainweb 日期:2010-04-15字体大小：小中大Tabs【标签】创建一个tab标签使用说明

12、使用至U的头文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.jsHTML 代码:Stab14、(1tab2.：tab3,1.1.1JQuery 代码12/创建一个标签容器,13$(#tt).tabs(options);1415/增加一个 tab 面板了$(#tt).tabs(add,17title:NewTab19工);closable:trueTabsContainer特性说明名称类型描述widthnumb标签容器宽度 autoheighternumb标签容器高度 autoidSeedernumb应该是生成标签面板的基

13、本 id0plainerboolea设置 true,标签栏显示背景 falsefitnboolea设置 true,自适应父集容器大小 falsebordernboolea标签容器边框 truennuscrollIncrmb标签卷按钮被按下，滚动的像素 100ementernuscrollDurmb滚动动画持续的毫秒 400二 content:TabBodyationer默认值名称类型描述idstring标签面板 idtitlestring标签面板的 titlecontestring标签面板的 content.默认值nullTabsContainer 事件说明名称参数ajax 面板加载完毕后触发，参数调用跟 jQuery.ajax 调功能一onLoadarguments样onSelecttitle选中标签面板触发onClosetitle关闭标签面板触发TabsContainer 方法说明名称参数描述resizenone调整容器的布局addoptions添加一个新的标签面板，选择一个配置对象参数，看标签面板的特性说明closetitle关闭一个标签面板，标题参数显示的面板被关闭。selecttitle选中一个标签面板existstitle指明特殊面板显示存在。TabPanel 特性说明描述nthrefstring面板远程加载进来数