EasyUI 标签(Tabs)用法

用法示例

创建tabs

1. 经由标记创建Tabs

从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到标记，每个tab panel 经由子标记被创建，其用法与Panel一样。

1. 2. 3. tab1 4.

5.

none;\> 6. tab2 7.

8.

display:none;\> 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 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 height plain fit border scrollIncrement scrollDuration tools 类型 number number boolean boolean boolean number number array Tabs 容器的宽度。 Tabs 容器的高度。 True 就不用背景容器图片来呈现 tab 条。 True 就设置 Tabs 容器的尺寸以适应它的父容器。 True 就显示 Tabs 容器边框。 每按一次tab 滚动按钮，滚动的像素数。 每一个滚动动画应该持续的毫秒数。 右侧工具栏，每个工具选项都和 Linkbutton 一样。 说明 默认值 auto auto false false true 100 400 null 事件

名称 onLoad onSelect onBeforeClose onClose onAdd onUpdate onContextMenu 参数 panel title title title 说明 当一个 ajax tab panel 完成加载远程数据时触发。 当用户选择一个 tab panel 时触发。 当一个 tab panel 被关闭前触发，返回 false 就取消关闭动作。 当用户关闭一个 tab panel 时触发。 当一个新的 tab panel 被添加时触发。 当一个 tab panel 被更新时触发。 当一个 tab panel 被右键点击时触发。 title title e, title 方法

名称 options tabs resize add close 参数 none none none options title 返回 tabs options。 返回全部 tab panel。 调整 tabs 容器的尺寸并做布局。 增加一个新的 tab panel，options 参数是一个配置对象，更多详细信息请参见 tab panel 特性。 关闭一个 tab panel，title 参数是指被关闭的 panel。 说明 getTab getSelected select exists title none title title 获取指定的 tab panel。 获取选中的 tab panel。 选择一个 tab panel。 是指是否存在特定的 panel。 更新指定的 tab panel，param 包含两个特性： update param tab：被更新的 tab panel。 options：panel 的 options。 Tab Panel Tab panel 特性被定义在 panel 组件里，下面是一些常用的特性。 名称 类型 说明 默认值 null true title content href cache string string string boolean Tab panel 的标题文字。 Tab panel 的内容。 加载远程内容来填充 tab panel 的 URL。 True 就在设定了有效的 href 特性时缓存这个 tab panel。 显示在tab panel 标题上的图标的 CSS 类。 Tab panel 的宽度。 Tab panel 的高度。 iconCls width height string number number null auto auto 一些附加的特性 名称 类型 说明 默认值 closable selected boolean boolean 当设置为 true 时，tab panel 将显示一个关闭按钮，点击它就能关闭这个tab panel。 当设置为 true 时，tab panel 将被选中。 false false

jQuery EasyUI 标签(Tabs)用法

发表于 2010 年 4 月 17 日

[ad#content]这里介绍一下标签(Tabs)用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。（查看演示）

同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：

? ? ? ?? 然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里添加一行代码来生成面板： ?? $('#tt').tabs(options); 也可以给面板函数添加一些参数: ?? $('#tt').tabs('add',{ ?? title:'New Tab', ?? content:'Tab Body', ?? closable:true ?? });

参数 参数名

参数

描述

默认值

width height

数字 标签容器的宽度

auto auto

数字 标签容器的高度

The base id seed to generate tab

idSeed plain

数字

panel’s DOM id attribute. 0

布尔

如果为ture标签没有背景图片 false

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库EasyUI 标签(Tabs)用法在线全文阅读。