1. 程式人生 > >easyUI中tabs使用iframe的方式載入選項卡

easyUI中tabs使用iframe的方式載入選項卡

使用了easyUi,發現panel元件的href比較坑人,不像extJs的html屬性那樣。今天遇到了tabs新增頁籤時需要使用iframe展示的問題,總結如下:

function addTab(title, href,icon){  
    var tt = $('#tabs');  
    if (tt.tabs('exists', title)){//如果tab已經存在,則選中並重新整理該tab          
        tt.tabs('select', title);  
        refreshTab({tabTitle:title,url:href});  
    } else {  
        if (href){  
            var content = '<iframe scrolling="no" frameborder="0"  src="'+href+'" style="width:100%;height:100%;"></iframe>';  
        } else {  
            var content = '未實現';  
        }  
        tt.tabs('add',{  
            title:title,  
            closable:true,  
            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?$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').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;  
    }  
}