【EasyUI】Tabs常用操作及href和content的异同

说明：EasyUI版本1.3.4 ，jQuery版本1.8.3

EasyUI Tabs常见使用方式

按照官方文档的说法，创建Tabs的方式有两种：

1. 静态页面标签
2. 动态JS代码

静态方式主要用于创建一些内容固定的Tabs，而动态方式通常用来导入Ajax请求返回的内容或者嵌入其他已存在页面。
我个人觉得创建并使用Tabs的方式其实只有一种，那就是先创建装载选项卡的容器，然后在容器中放入具体的选项卡，至于你怎么放，就是官方给出的静态和动态两种方式了。

创建容器：

1. <div id="data_tabs" data-options="fit:true,border:false,tabWidth:110,tabHeight:25" class="easyui-tabs"> </div>

添加选项卡到容器
1、静态页面标签

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" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
6. tab2
7. </div>
8. <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
9. tab3
10. </div>
11. </div>

2、动态JS代码

1. $('#tt').tabs('add',{
2. title:'New Tab',
3. content:'Tab Body',
4. closable:true,
5. tools:[{
6. iconCls:'icon-mini-refresh',
7. handler:function(){
8. alert('refresh');
9. }
10. }]
11. });

个人觉得，JS动态添加选项卡的情况会比较多，比如创建下面这样的Tabs，内容是从其他页面导入并动态更新的

如果在页面上创建，扩展起来不方便，并且同时还需要在JS中使用Tabs的update功能，如果动态添加就会很方便，具体实现的代码如下：

1. <div id="data_tabs" data-options="fit:true,border:false,tabWidth:110,tabHeight:25" class="easyui-tabs">
2. <div title=””></div>
3. <div title=””></div>
4. <div title=””></div>
5. …
6. </div>

1. //点击页面之后更新每个tab的内容，用到onSelect事件
2. $(document).ready(function(){
3. $(“#data_tabs”).tabs({
4. onSelect:function(title, index){
5. …
6. }
7. });
8. });
9. var t = $(“#data_tabs”);
10. var mytab = t.tabs('getSelected');  // 获取选择的面板
11. t.tabs('update', {
12. tab: mytab,
13. options: {
14. title: title,
15. content: mycontent  // 新内容的URL
16. }
17. });

首先在页面上创建一个Tabs容器

1. <div id="data_tabs" data-options="fit:true,border:false,tabWidth:110,tabHeight:25" class="easyui-tabs"></div>

然后把所有选项卡的title和url信息保存在对象中，需要扩展就给这个对象添加title和url

1. var userName = $("#userName").val();
2. var userId = $("#userId").val();
3. var titleAndUrls = {
4. "大区" : "",
5. "品牌" : BasePath+"/authority_user_brand/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
6. "管理城市" : "",
7. "经营城市" : BasePath+"/authority_user_managing_city/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
8. "订货单位" : BasePath+"/authority_user_order_unit/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
9. "结算公司" : BasePath+"/authority_user_settlement_company/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
10. "店铺" : BasePath+"/authority_user_store/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
11. "仓库" : BasePath+"/authority_user_storage/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId
12. };

然后再遍历这个对象创建出所有的tabs

1. //遍历titleAndUrls并创建所有tab
2. $.each(titleAndUrls, function(title, url){
3. user_data_auth.createTab(title, url);
4. });
5. //用title和url创建tab
6. user_data_auth.createTab = function (title, url) {
7. var content = '<iframe src="' + url + '" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="yes" width="100%" height="100%"
8. $('#data_tabs').tabs('add', {
9. title : title,
10. selected : false,
11. closable : false,
12. content : content
13. });
14. };

如果需要创建完之后默认选中第一个，可以使用EasyUI Tabs的select函数

1. //初始化第一个tab
2. $('#data_tabs').tabs("select", 0);

url和content的异同

add或者update一个选项卡的时候，可以通过指定url属性或者content属性来嵌入其他页面内容
使用url：嵌入的其他页面和本页面处于同一个作用域，也就是说，本页面的和导入的JS方法不能有命名冲突，标签的id也不能冲突，而且导入的页面不能有body和html标签，仅仅作为一个内容子页面，此时导入页面的JS代码可以在本页面一起引入，也可以在导入页面的底部引入
使用content：嵌入时可以使用iframe标签，也就是说你可以嵌入任意你想嵌入的内容而不受任何限制，但是嵌入完整页面会造成一定程度的资源浪费，比如同样一个js文件需要被两次或多次请求