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

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

EasyUI Tabs常見使用方式

按照官方文檔的說法，創建Tabs的方式有兩種：

1. 靜態頁面標簽
2. 動態JS代碼

靜態方式主要用於創建一些內容固定的Tabs，而動態方式通常用來導入Ajax請求返回的內容或者嵌入其他已存在頁面。
我個人覺得創建並使用Tabs的方式其實只有一種，那就是先創建裝載選項卡的容器，然后在容器中放入具體的選項卡，至於你怎么放，就是官方給出的靜態和動態兩種方式了。

創建容器：

 

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

添加選項卡到容器
1、靜態頁面標簽

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
        tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
        tab3
</div>
</div>

2、動態JS代碼

 

$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});

個人覺得，JS動態添加選項卡的情況會比較多，比如創建下面這樣的Tabs，內容是從其他頁面導入並動態更新的

 

如果在頁面上創建，擴展起來不方便，並且同時還需要在JS中使用Tabs的update功能，如果動態添加就會很方便，具體實現的代碼如下：

 

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

//點擊頁面之后更新每個tab的內容，用到onSelect事件
$(document).ready(function(){
$(“#data_tabs”).tabs({
onSelect:function(title, index){
…
}
});
});
var t = $(“#data_tabs”);
        var mytab = t.tabs('getSelected');  // 獲取選擇的面板
        t.tabs('update', {
            tab: mytab,
            options: {
                title: title,
                content: mycontent  // 新內容的URL
            }
        });

首先在頁面上創建一個Tabs容器

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

然后把所有選項卡的title和url信息保存在對象中，需要擴展就給這個對象添加title和url

 

var userName = $("#userName").val();
    var userId = $("#userId").val();
    var titleAndUrls = {
            "大區" : "",
            "品牌" : BasePath+"/authority_user_brand/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
            "管理城市" : "",
            "經營城市" : BasePath+"/authority_user_managing_city/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
            "訂貨單位" : BasePath+"/authority_user_order_unit/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
            "結算公司" : BasePath+"/authority_user_settlement_company/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
            "店鋪" : BasePath+"/authority_user_store/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
            "倉庫" : BasePath+"/authority_user_storage/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId
    };

然后再遍歷這個對象創建出所有的tabs

 

 

//遍歷titleAndUrls並創建所有tab
    $.each(titleAndUrls, function(title, url){
        user_data_auth.createTab(title, url);
    });
//用title和url創建tab
user_data_auth.createTab = function (title, url) {
var content = '<iframe src="' + url + '" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="yes" width="100%" height="100%"
    $('#data_tabs').tabs('add', {
        title : title,
        selected : false,
        closable : false,
        content : content
    });
};

如果需要創建完之后默認選中第一個，可以使用EasyUI Tabs的select函數

 

 

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

 

url和content的異同

add或者update一個選項卡的時候，可以通過指定url屬性或者content屬性來嵌入其他頁面內容
使用url：嵌入的其他頁面和本頁面處於同一個作用域，也就是說，本頁面的和導入的JS方法不能有命名沖突，標簽的id也不能沖突，而且導入的頁面不能有body和html標簽，僅僅作為一個內容子頁面，此時導入頁面的JS代碼可以在本頁面一起引入，也可以在導入頁面的底部引入
使用content：嵌入時可以使用iframe標簽，也就是說你可以嵌入任意你想嵌入的內容而不受任何限制，但是嵌入完整頁面會造成一定程度的資源浪費，比如同樣一個js文件需要被兩次或多次請求