EasyUI标签(Tabs)用法.doc

用法示例创建tabs1. 经由标记创建Tabs从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 easyui-tabs 类添加到标记，每个tab panel 经由子标记被创建，其用法与Panel一样。1. 2. 3. tab1 4. 5. 6. tab2 7. 8. 9. tab3 10. 11. 2. 编程创建Tabs现在我们编程创建 Tabs，我们同时捕捉 onSelect 事件。1. $(#tt).tabs( 2. border:false, 3. onSelect:function(title) 4. alert(title+ is selected); 5. 6. ); 增加新的 tab panel1. / 增加一个新的 tab panel 2. $(#tt).tabs(add, 3. title:New Tab, 4. content:Tab Body, 5. closable:true 6. ); 获取选中的 Tab1. / 获取选中的 tab panel 和它的 tab 对象 2. var pp = $(#tt).tabs(getSelected); 3. var tab = pp.panel(options).tab; / 相应的 tab 对象 特性名称类型说明默认值widthnumberTabs 容器的宽度。autoheightnumberTabs 容器的高度。autoplainbooleanTrue 就不用背景容器图片来呈现 tab 条。falsefitbooleanTrue 就设置 Tabs 容器的尺寸以适应它的父容器。falseborderbooleanTrue 就显示 Tabs 容器边框。truescrollIncrementnumber每按一次tab 滚动按钮，滚动的像素数。100scrollDurationnumber每一个滚动动画应该持续的毫秒数。400toolsarray右侧工具栏，每个工具选项都和 Linkbutton 一样。null事件名称参数说明onLoadpanel当一个 ajax tab panel 完成加载远程数据时触发。onSelecttitle当用户选择一个 tab panel 时触发。onBeforeClosetitle当一个 tab panel 被关闭前触发，返回 false 就取消关闭动作。onClosetitle当用户关闭一个 tab panel 时触发。onAddtitle当一个新的 tab panel 被添加时触发。onUpdatetitle当一个 tab panel 被更新时触发。onContextMenue, title当一个 tab panel 被右键点击时触发。方法名称参数说明optionsnone返回 tabs options。tabsnone返回全部 tab panel。resizenone调整 tabs 容器的尺寸并做布局。addoptions增加一个新的 tab panel，options 参数是一个配置对象，更多详细信息请参见 tab panel 特性。closetitle关闭一个 tab panel，title 参数是指被关闭的 panel。getTabtitle获取指定的 tab panel。getSelectednone获取选中的 tab panel。selecttitle选择一个 tab panel。existstitle是指是否存在特定的 panel。updateparam更新指定的 tab panel，param 包含两个特性：tab：被更新的 tab panel。options：panel 的 options。Tab PanelTab panel 特性被定义在 panel 组件里，下面是一些常用的特性。名称类型说明默认值titlestringTab panel 的标题文字。 contentstringTab panel 的内容。 hrefstring加载远程内容来填充 tab panel 的 URL。nullcachebooleanTrue 就在设定了有效的 href 特性时缓存这个 tab panel。trueiconClsstring显示在tab panel 标题上的图标的 CSS 类。nullwidthnumberTab panel 的宽度。autoheightnumberTab panel 的高度。auto一些附加的特性名称类型说明默认值closableboolean当设置为 true 时，tab panel 将显示一个关闭按钮，点击它就能关闭这个tab panel。falseselectedboolean当设置为 true 时，tab panel 将被选中。falsejQuery EasyUI 标签(Tabs)用法发表于 2010 年 4 月 17 日ad#content这里介绍一下标签(Tabs)用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。（查看演示）同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：1 2 3 tab14 5 6 tab27 8 9 tab310 11 然后按照jQuery EasyUI框架使用文档包含必要文件后，只要在$(function() ); 里添加一行代码来生成面板：12 $(#tt).tabs(options);也可以给面板函数添加一些参数:13 $(#tt).tabs(add,14 title:New Tab,15 content:Tab Body,16 closable:true17 );参数参数名参数描述默认值width数字标签容器的宽度autoheight数字标签容器的高度autoidSeed数字The base id seed to generate tab panels DOM id attribute.0plain布尔如果为ture标签没有背景图片falsefit布尔如果为ture则设置标签的大小以适应它的容器的父容器falseborder布尔如果为true则显示标签容器的边框truescrollIncrement数字滚动按钮每次被按下时滚动的像素值100scrollDuration数字每次滚动持续的毫秒数400事件事件名参数描述onLoadarguments当一个AJAX标签加载远程数据完成时被触发，参数和jQuery.ajax成功返回的回调函数相同onSelecttitle当用户选择一个标签面板时被触发onClosetitle当用户关闭一个标签面板时被触发方法方法名参数描述resizenone调整标签容器的大小和布局addoptions添加新标签面板，可选参数是一个配置对象，详细信息可以查看下面的标签面板属性closetitle关闭一个标签面板，标题参数表明被关闭的面板selecttitle选择一个标签面板existstitle指示特定的标签是否存在标签面板属性属性名类型描述默认值id字符串标签面板的ID属性nulltitle字符串标签面板的文本标题content字符串标签面板的主体内容href字符串填充标签内容的远程URL地址nullcache布尔如果为true，当设置href时，对标签面板进行缓存trueicon字符串标签面板上标题的图标CSS类nullclosable布尔如果为true，标签面板会显示出关闭按钮，点击可以关闭选项卡面板。falseselected布尔如果为true，标签标签面板将被选中falsewidth数字标签面板的宽度autoheight数字标签面板的高度auto演示总结发布jQuery EasyUI 中文APILayout(Tabs) 作者:rainweb 日期:2010-04-15字体大小: 小 中 大 Tabs【标签】创建一个tab标签使用说明使用到的头文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.jsHTML代码1 2 3 tab1 4 5 6 tab2 7 8 9 tab3 10 11 JQuery代码12 /创建一个标签容器 13 $(#tt).tabs(options); 14 15 /增加一个tab面板 16 $(#tt).tabs(add, 17 title:New Tab, 18 content:Tab Body, 19 closable:true 20 ); Tabs Container特性说明名称类型描述默认值widthnumber标签容器宽度autoheightnumber标签容器高度autoidSeednumber应该是生成标签面板的基本id0plainboolean设置true，标签栏显示背景falsefitboolean设置true，自适应父集容器大小falseborderboolean标签容器边框truescrollIncrementnumber标签卷按钮被按下，滚动的像素100scrollDurationnumber滚动动画持续的毫秒400 Tabs Container事件说明名称参数描述onLoadargumentsajax面板加载完毕后触发，参数调用跟jQuery.ajax调功能一样onSelecttitle选中标签面板触发onClosetitle关闭标签面板触发 Tabs Container方法说明名称参数描述resizenone调整容器的布局addoptions添加一个新的标签面板,选择一个配置对象参数,看标签面板的特性说明closetitle关闭一个标签面板,标题参数显示的面板被关闭。selecttitle选中一个标签面板existstitle指明特殊面板显示存在。 Tab Panel特性说明名称类型描述默认值idstring标签面板idnulltitlestring标签面板的title contentstring标签面板的content. hrefstring面板远程加载进