EasyUI 标签(Tabs)用法.docVIP

用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 easyui-tabs 类添加到div/标记，每个tab panel 经由子div/标记被创建，其用法与Panel一样。 1. div id=tt class=easyui-tabs style=width:500px;height:250px; 2. div title=Tab1 style=padding:20px;display:none; 3. tab1 4. /div 5. div title=Tab2 closable=true style=overflow:auto;padding:20px;display:none; 6. tab2 7. /div 8. div title=Tab3 iconCls=icon-reload closable=true style=padding:20px;display:none; 9. tab3 10. /div 11. /div 2. 编程创建Tabs 现在我们编程创建 Tabs，我们同时捕捉 onSelect 事件。 1. $(#tt).tabs({ 2. border:false, 3. onSelect:function(title){ 4. alert(title+ is selected); 5. } 6. }); 增加新的 tab panel 1. // 增加一个新的 tab panel 2. $(#tt).tabs(add,{ 3. title:New Tab, 4. content:Tab Body, 5. closable:true 6. }); 获取选中的 Tab 1. // 获取选中的 tab panel 和它的 tab 对象 2. var pp = $(#tt).tabs(getSelected); 3. var tab = pp.panel(options).tab; // 相应的 tab 对象 特性 名称 类型 说明 默认值 width number Tabs 容器的宽度。 auto height number Tabs 容器的高度。 auto plain boolean True 就不用背景容器图片来呈现 tab 条。 false fit boolean True 就设置 Tabs 容器的尺寸以适应它的父容器。 false border boolean True 就显示 Tabs 容器边框。 true scrollIncrement number 每按一次tab 滚动按钮，滚动的像素数。 100 scrollDuration number 每一个滚动动画应该持续的毫秒数。 400 tools array 右侧工具栏，每个工具选项都和 Linkbutton 一样。 null 事件 名称 参数 说明 onLoad panel 当一个 ajax tab panel 完成加载远程数据时触发。 onSelect title 当用户选择一个 tab panel 时触发。 onBeforeClose title 当一个 tab panel 被关闭前触发，返回 false 就取消关闭动作。 onClose title 当用户关闭一个 tab panel 时触发。 onAdd title 当一个新的 tab panel 被添加时触发。 onUpdate title 当一个 tab panel 被更新时触发。 onContextMenu e, title 当一个 tab panel 被右键点击时触发。 方法 名称 参数 说明 options none 返回 tabs options。 tabs none 返回全部 tab panel。 resize none 调整 tabs 容器的尺寸并做布局。 add options 增加一个新的 tab panel，options 参数是一个配置对象，更多详细信息请参见 tab panel 特性。 close title 关闭一个 tab panel，title 参数是指被关闭的 panel。 getTab title 获取指定的 tab panel。 getSelected none 获取选中的