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.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}); } } }); });