EasyUI标签(Tabs)用法

标记被创建，其用法与Panel一样1. 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 optionstabsnone返回全部 tab panelresizenone调整 tabs 容器的尺寸并做布局addoptions增加一个新的 tab panel，options 参数是一个配置对象，更多详细信息请参见 tab panel 特性closetitle关闭一个 tab panel，title 参数是指被关闭的 panelgetTabtitle获取指定的 tab panelgetSelectednone获取选中的 tab panelselecttitle选择一个 tab panelexiststitle是指是否存在特定的 panelupdateparam更新指定的 tab panel，param 包含两个特性：tab：被更新的 tab paneloptions：panel 的 optionsTab PanelTab panel 特性被定义在 panel 组件里，下面是一些常用的特性名称类型说明默认值titlestringTab panel 的标题文字 contentstringTab panel 的内容 hrefstring加载远程内容来填充 tab panel 的 URL。

nullcachebooleanTrue 就在设定了有效的 href 特性时缓存这个 tab paneltrueiconClsstring显示在tab panel 标题上的图标的 CSS 类nullwidthnumberTab panel 的宽度autoheightnumberTab panel 的高度auto一些附加的特性名称类型说明默认值closableboolean当设置为 true 时，tab panel 将显示一个关闭按钮，点击它就能关闭这个tab panelfalseselectedboolean当设置为 true 时，tab panel 将被选中falsejQuery EasyUI 标签(Tabs)用法发表于 2010 年 4 月 17 日[ad#content]这里介绍一下标签(Tabs)用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例查看演示）同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：1

然后按照《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 panel’s 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 中文API—Layout(Tabs) 作者:rainweb 日期:2010-04-15字体大小: 小 中 大 Tabs【标签】创建一个tab标签使用说明HTML代码1