 tab1



style="overflow:auto;padding:20px;display:none;">

 tab2



style="padding:20px;display:none;">

 tab3



tab1

style="overflow:auto;padding:20px;display:none;">







tab2

style="padding:20px;display:none;">

 tab3



1.

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 = ('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

如果为ture则设置标签的大小以适应它的fit

border

scrollIncrement

scrollDuration

数字 每次滚动持续的毫秒数

400

数字 滚动按钮每次被按下时滚动的像素值

100

布尔 容器的父容器

如果为true则显示标签容器的边框

false

布尔

true

事件

事件名

参数

描述

当一个AJAX标签加载远程数据完成时被触发，参数和onLoad

onSelect

onClose

arguments

title

title

成功返回的回调函数相同

当用户选择一个标签面板时被触发

当用户关闭一个标签面板时被触发

方法

方法名

参数

描述

resize none

调整标签容器的大小和布局

添加新标签面板，可选参数是一个配置对象，详细信息可以查看下面的标签面板属性

add

close

select

options

title

title

关闭一个标签面板，标题参数表明被关闭的面板

选择一个标签面板

exists title

指示特定的标签是否存在

标签面板属性

属性名 类型

描述

默认值

id

title

content

href

字符串

标签面板的ID属性 null

字符串 标签面板的文本标题

字符串 标签面板的主体内容

填充标签内容的远程URL地址

字符串

null

如果为true，当设置href时，对标签面板进行缓cache

icon

布尔 存

标签面板上标题的图标CSS类

true

字符串

null

如果为true，标签面板会显示出关闭按钮，点击closable

selected

width

height

演示

布尔 可以关闭选项卡面板。

如果为true，标签标签面板将被选中

false

布尔

false

数字 标签面板的宽度

auto

auto

数字 标签面板的高度

总结发布jQuery EasyUI 中文API—Layout(Tabs)

作者:rainweb 日期:2010-04-15

字体大小: 小 中 大

Tabs【标签】

创建一个tab标签

使用说明

使用到的头文件：、、、

HTML代码











JQuery代码

 //创建一个标签容器

 $('#tt').tabs(options);



 //增加一个tab面板

 $('#tt').tabs('add',{

 title:'New Tab',

 content:'Tab Body',

 closable:true

 });

Tabs Container特性说明

名称 类型

nuwidth mber

nuheight mber

nuidSeed mber

booplain lean

boofit lean

booborder lean

scrollIncrement

number

number

滚动动画持续的毫秒 400

标签卷按钮被按下，滚动的像素 100

标签容器边框 true

设置true，自适应父集容器大小 false

设置true，标签栏显示背景 false

应该是生成标签面板的基本id 0

标签容器高度 auto

标签容器宽度 auto

描述 默认值

scrollDuration

Tabs Container事件说明

名称

onLoad

参数

arguments

描述

ajax面板加载完毕后触发，参数调用跟调功能一样

选中标签面板触发

关闭标签面板触发

onSelect title

onClose title

Tabs Container方法说明

名称 参数

调整容器的布局

描述

resize none

add

close

options 添加一个新的标签面板,选择一个配置对象参数,看标签面板的特性说明

title 关闭一个标签面板,标题参数显示的面板被关闭。

选中一个标签面板

指明特殊面板显示存在。

select title

exists title

Tab Panel特性说明

名称

id

title

content

类型

string 标签面板id

string 标签面板的title

string 标签面板的content.

描述 默认值

null

href string 面板远程加载进来数据的地址.

cache

boolean

设置true，缓存标签面板

icon string 标签面板标题上图标css。

closabooleble an

设置true，标题上显示一个关闭按钮

selectbooleed an

设置true，标签面板被选中【默认那个显示在前】width

number

标签面板宽度

heighnumt ber

标签面板高度

有些觉得翻译的牵强，肯定也有错的地方，谢谢指出来。

null

true

null

false

false

auto

auto