EasyUI兩種動态添加tab Iframe頁面的方法

/** 動态添加tab-----方式一     **/ 
    function addIframeTab(titleTxt,href,icon) {
        $('#mytabs').tabs('addIframeTab', {
            //tab參數為一對象，其屬性同于原生add方法參數
            tab : {
                title : titleTxt,
                closable : false,
                tools : [ {
                    iconCls : icon,
                    handler : function(e) {
                        var title = $(e.target).parent().parent().text();
                        $('#tabs').tabs('updateIframeTab', {
                            'which' : title
                        });
                    }
                } ]
            },
            //iframe參數用于設定iframe資訊，包含：
            //src[iframe位址],frameBorder[iframe邊框,，預設值為0],delay[淡入淡出效果時間]
            //height[iframe高度，預設值為100%],width[iframe寬度，預設值為100%]
            iframe : {
                src :href
            }
        });
        $('#mytabs').tabs('addEventParam');
    }
    
    /** 動态添加tab-----方式二     **/ 
    function addTab(title, href,icon){  
        var tt = $('#mytabs');  
        if (tt.tabs('exists', title)){//如果tab已經存在,則選中并重新整理該tab          
            tt.tabs('select', title);  
            refreshTab({tabTitle:title,url:href});  
        } else {  
             var content="";
            if (href){  
                content = '<iframe scrolling="no" frame  src="'+href+'" style="width:100%;height:100%;"></iframe>';  
            } else {  
                content = '未實作';  
            }  
            tt.tabs('add',{  
                title:title,  
                closable:false,  
                content:content,  
                iconCls:icon||'icon-default'  
            });  
        }  
    }  
    /**     
     * 重新整理tab 
     * @cfg  
     *example: {tabTitle:'tabTitle',url:'refreshUrl'} 
     *如果tabTitle為空，則預設重新整理目前選中的tab 
     *如果url為空，則預設以原來的url進行reload 
     */  
    function refreshTab(cfg){  
        var refresh_tab = cfg.tabTitle?$('#mytabs').tabs('getTab',cfg.tabTitle):$('#mytabs').tabs('getSelected');  
        if(refresh_tab && refresh_tab.find('iframe').length > 0){  
        var _refresh_ifram = refresh_tab.find('iframe')[0];  
        var refresh_url = cfg.url?cfg.url:_refresh_ifram.src;  
        //_refresh_ifram.src = refresh_url;  
        _refresh_ifram.contentWindow.location.href=refresh_url;  
        }  
    }  
     
     window.onload=function()
        {
            var pages=[{pageName:"task",title:"任務下發",icon:"icon-task"},{pageName:"track",title:"任務跟蹤",icon:"icon-track"},{pageName:"report",title:"資料分析",icon:"icon-report"}];
            for (var i = 0; i < pages.length; i++) {
                var href= PROJECT_URL + "/drilling/"+pages[i].pageName;
                addTab(pages[i].title,href,pages[i].icon);
            }
        };      

注：第二種圖示顯示更好看一些。

*點選tab切換頁面處理

var PROJECT_PID = parent.PROJECT_ID;
    var count = 0;
    var PROJECT_URL = "${ctx}";
    $(document).ready(function() {
        //更改父窗體顯示的标簽名稱 
        parent.$("#mainContainer").panel({
            title : "@鑽井工序"
        });
        //設定頁籤頁面請求   
        $('#mytabs').tabs({
            border : false,
            onSelect : function(title) {
                if (title == '任務下發' && count != 0) {
                    var reqUrl = PROJECT_URL + "/drilling/task";
                    refreshTab({tabTitle:title,url:reqUrl});  
                } else if (title == '任務跟蹤') {
                    count = 1;
                    var reqUrl = PROJECT_URL + "/drilling/track";
                    refreshTab({tabTitle:title,url:reqUrl});  
                } else if (title == '資料分析') {
                    count = 1;
                    var reqUrl = PROJECT_URL + "/drilling/report";
                    refreshTab({tabTitle:title,url:reqUrl});  
                }
            }
        }); 
    });      

轉載于:https://www.cnblogs.com/boonya/p/3529672.html