EasyUI-标签(Tabs)用法

Posted 2020-08-13 芜明-追星

用法示例

创建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	获取选中的 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

一些附加的特性

名称	类型	说明	默认值
closable	boolean	当设置为 true 时，tab panel 将显示一个关闭按钮，点击它就能关闭这个tab panel。	false
selected	boolean	当设置为 true 时，tab panel 将被选中。	false

 

jQuery EasyUI 标签(Tabs)用法

 

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

 

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

1        <div id="tt" 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" icon="icon-reload" closable="true" style="padding:20px;display:none;">

9                tab3

10        </div>

11    </div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(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	关闭一个标签面板，标题参数表明被关闭的面板
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" 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" icon="icon-reload" closable="true" style="padding:20px;display:none;"> 

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 应该是生成标签面板的基本id 0 plain boolean 设置true，标签栏显示背景 false fit boolean 设置true，自适应父集容器大小 false border boolean 标签容器边框 true scrollIncrement number 标签卷按钮被按下，滚动的像素 100 scrollDuration number 滚动动画持续的毫秒 400

 

 

Tabs Container事件说明

名称	参数	描述
onLoad	arguments	ajax面板加载完毕后触发，参数调用跟jQuery.ajax调功能一样
onSelect	title	选中标签面板触发
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
closable	boolean	设置true，标题上显示一个关闭按钮	false
selected	boolean	设置true，标签面板被选中【默认那个显示在前】	false
width	number	标签面板宽度	auto
height	number	标签面板高度	auto

 

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