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" frameborder="0"  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.οnlοad=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/aiwz/p/6153891.html