EasyUIの2つの方法は、tab Iframeページを動的に追加する方法である.

4038 ワード
javascript
/**     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 = '';  
            } 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 &amp;&amp; refresh_tab.find('iframe').length &gt; 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 &lt; pages.length; i++) {
                var href= PROJECT_URL + "/drilling/"+pages[i].pageName;
                addTab(pages[i].title,href,pages[i].icon);
            }
        };</code></pre> :   のアイコンのほうがもっと  です.<br>＊tabをクリックしてページ  を り える<pre><code>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 == '    ' &amp;&amp; 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});  
                }
            }
        }); 
    });</code></pre>   :https://www.cnblogs.com/aiwz/p/6153891.html
JS bindを徹底的に理解する