EasyUI-标签（Tabs）⽤法
⽤法⽰例
创建tabs
1. 经由标记创建Tabs
从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到<div/>标记，每个tab panel 经由⼦<div/>标记被创建，其⽤法与Panel⼀样。
1. <div id="tt" class="easyui-tabs" >
2. <div title="Tab1" >
3. tab1
4. </div>
5. <div title="Tab2" closable="true" >
6. tab2
7. </div>
8. <div title="Tab3" iconCls="icon-reload" closable="true" >
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 被更新时触发。onContextMenue, 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。
getSelectednone获取选中的 tab panel。
select title选择⼀个 tab panel。
exists title是指是否存在特定的 panel。
update param 更新指定的 tab panel，param 包含两个特性：tab：被更新的 tab panel。
options：panel 的 options。
Tab Panel
Tab panel 特性被定义在 panel 组件⾥，下⾯是⼀些常⽤的特性。
名称类型说明默认值title string Tab panel 的标题⽂字。
content string Tab panel 的内容。
href string加载远程内容来填充 tab panel 的 URL。null
cache boolean True 就在设定了有效的 href 特性时缓存这个
tab panel。
true
iconCls string显⽰在tab panel 标题上的图标的 CSS 类。null
width number Tab panel 的宽度。auto
height number Tab panel 的⾼度。auto
⼀些附加的特性
名称类型说明默认值
closableboolean 当设置为 true 时，tab panel 将显⽰⼀个关闭按钮，点击它
就能关闭这个tab panel。
false
selectedboolean当设置为 true 时，tab panel 将被选中。false jQuery EasyUI 标签(Tabs)⽤法
[ad#content]这⾥介绍⼀下标签(Tabs)⽤法以及参数，⾸先我们可以先看⼀下⾯板功能可以做什么，下图就是⼀个⾯板的实例。
同样我们来通过⼀个⼩例⼦来学习⼀下这些参数，HTML代码如下：
1 <div id="tt" >
2 <div title="Tab1" >
3 tab1
4 </div>
5 <div title="Tab2" closable="true" >
6 tab2
7 </div>
8 <div title="Tab3" icon="icon-reload" closable="true" >
9 tab3
10 </div>
11 </div>
然后按照《》包含必要⽂件后，只要在$(function(){ }); ⾥添加⼀⾏代码来⽣成⾯板：
12 $('#tt').tabs(options);
也可以给⾯板函数添加⼀些参数:
13 $('#tt').tabs('add',{
14 title:'New Tab',
15 content:'Tab Body',
16 closable:true
17 });
参数
参数名参数描述默认值
width数字标签容器的宽度auto
height数字标签容器的⾼度auto
idSeed数字The base id seed to generate tab panel’s DOM id attribute.0
plain布尔如果为ture标签没有背景图⽚false
fit布尔如果为ture则设置标签的⼤⼩以适应它
的容器的⽗容器false
border布尔如果为true则显⽰标签容器的边框true scrollIncrement数字滚动按钮每次被按下时滚动的像素值100 scrollDuration数字每次滚动持续的毫秒数400事件
事件名参数描述
onLoad arguments 当⼀个AJAX标签加载远程数据完成时被触发，参数和jQuery.ajax成功返回的回调函数相同
onSelect title当⽤户选择⼀个标签⾯板时被触发onClose title当⽤户关闭⼀个标签⾯板时被触发⽅法
⽅法名参数描述
resize none调整标签容器的⼤⼩和布局
add options 添加新标签⾯板，可选参数是⼀个配置对象，详细信息可以查看下⾯的标签⾯板属性
close title关闭⼀个标签⾯板，标题参数表明被关闭的⾯板
close title关闭⼀个标签⾯板，标题参数表明被关闭的⾯板select title选择⼀个标签⾯板
exists title指⽰特定的标签是否存在
标签⾯板属性
属性名类型描述默认值
id字符串标签⾯板的ID属性null
title字符串标签⾯板的⽂本标题
content字符串标签⾯板的主体内容
href字符串填充标签内容的远程URL地址null
cache布尔如果为true，当设置href时，对标签⾯板进⾏
缓存true
icon字符串标签⾯板上标题的图标CSS类null
closable布尔如果为true，标签⾯板会显⽰出关闭按钮，点
击可以关闭选项卡⾯板。false
selected布尔如果为true，标签标签⾯板将被选中false
width数字标签⾯板的宽度auto
height数字标签⾯板的⾼度auto
总结发布jQuery EasyUI 中⽂API—Layout(Tabs)
Tabs【标签】
创建⼀个tab标签
使⽤说明
使⽤到的头⽂件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js
HTML代码
1 <div id="tt" >
jquery ajax例子2 <div title="Tab1" >
3 tab1
4 </div>
5 <div title="Tab2" closable="true" >
6 tab2
7 </div>
8 <div title="Tab3" icon="icon-reload" closable="true" >
9 tab3
10 </div>
11 </div>
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特性说明
名称类型描述默认值width number标签容器宽度auto
height number标签容器⾼度auto
idSeed number应该是⽣成标签⾯板的基本id0
plain boolean设置true，标签栏显⽰背景false
fit boolean设置true，⾃适应⽗集容器⼤⼩false
border boolean标签容器边框true scrollIncrementnumber标签卷按钮被按下，滚动的像素100 scrollDuration number滚动动画持续的毫秒400
Tabs Container事件说明
名称参数描述
onLoad arguments ajax⾯板加载完毕后触发，参数调⽤跟jQuery.ajax调功能⼀样
onSelecttitle选中标签⾯板触发
onClose title关闭标签⾯板触发
Tabs Container⽅法说明
名称参数描述
resize none调整容器的布局
add options添加⼀个新的标签⾯板，选择⼀个配置对象参数，看标签
⾯板的特性说明
close title关闭⼀个标签⾯板，标题参数显⽰的⾯板被关闭。
select title选中⼀个标签⾯板
exists title指明特殊⾯板显⽰存在。
Tab Panel特性说明
名称类型描述默认值id string标签⾯板id null
title string标签⾯板的title
content string标签⾯板的content.
href string⾯板远程加载进来数据的地址.null cache boolean设置true，缓存标签⾯板true icon string标签⾯板标题上图标css。null closableboolean设置true，标题上显⽰⼀个关闭按钮false selectedboolean设置true，标签⾯板被选中【默认那个显⽰在前】false width number标签⾯板宽度auto height number标签⾯板⾼度auto
有些觉得翻译的牵强，肯定也有错的地⽅，谢谢指出来。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论