Main页面
<body class="mainiframe"> <div class="side" id="frmTitle" name="fmTitle" > <iframe src="doc!tree.action?organizeId=${param.organizeId }" name="right" id="leftMain" frameborder="no" scrolling="auto" width="100%" height="auto" allowtransparency="true"> </iframe> </div> <div class="main_ri" id="frmr" name="fmr"> <iframe src="doc!tabs.action" name="mainright" id="rightMain" frameborder="no" scrolling="no" width="100%" height="auto" allowtransparency="true"> </iframe> </div> </body>
Tree页面
$(function(){ $(".easyui-tree").tree({ animate:true, onClick:function(node){ $(".easyui-tree").tree("toggle",node.target); if(node.attributes && node.attributes.url){
//获取父页面的document对象 var $right = $("#rightMain",parent.window.document); $right[0].contentWindow.addTab(node.text,node.attributes.url+"?organizeId=${param.organizeId}"); } }, onContextMenu:function(e){ e.preventDefault(); } }); });
2：
$(function(){ $("#tree").tree({ lines:true, url:"${ctx}/menu/menuEasyUI.action", onLoadSuccess:function(){ $("#tree").tree('collapseAll'); }, onClick:function(node){ if(node.state=='closed'&&(!$("#tree").tree('isLeaf',node.target))){ //状态为关闭而且非叶子节点 $(this).tree('expand',node.target);//点击文字展开菜单 if (node.attributes && node.attributes.url) { openTab(node); } }else{ if($("#tree").tree('isLeaf',node.target)){ //状态为打开而且为叶子节点 if (node.attributes && node.attributes.url) { openTab(node); } }else{ $(this).tree('collapse',node.target);//点击文字关闭菜单 } } } });
function openTab(node){ if($("#tt").tabs("exists",node.text)){ $("#tt").tabs("select",node.text); }else{ var content="<iframe frameborder=0 scrolling='auto' style='100%;height:100%'
src='${pageContext.request.contextPath}"+node.attributes.url+"'></iframe>" $("#tt").tabs("add",{ title:node.text, iconCls:node.iconCls, closable:true, content:content }); } } });
<!-- 主显示区域选项卡界面 title="主显示区域"--> <div region="center"> <div class="easyui-tabs" fit="true" id="tt"> <div title="首页"> <iframe width='100%' height='100%' id='iframe' frameborder='0' scrolling='auto'
src='<%=request.getContextPath()%>/admin/welcomeInfo.jsp'></iframe> </div> </div> </div>
<ul class="easyui-tree"> <li data-options="state:'closed'"> <span>基础信息</span> <ul> <li data-options="attributes:{url:'base!forBaseSave.action'}">煤矿基本信息</li> <li data-options="attributes:{url:'base!forZcmcSave.action'}">主采煤层信息</li> <li data-options="attributes:{url:'base!forJtInfoSave.action'}">井筒信息</li> <li data-options="attributes:{url:'base!forCmgzmJdInfoPage.action'}">矿井采煤信息</li> <li data-options="attributes:{url:'base!forCmgzmJbInfoPage.action'}">采煤工作面基本信息</li> <li data-options="attributes:{url:'base!forZzInfoPage.action'}">证照信息</li> <li data-options="attributes:{url:'base!forKzkhInfoPage.action'}">矿长考核信息</li> <li data-options="attributes:{url:'base!forKjzpPage.action'}">矿井照片信息</li> <li data-options="attributes:{url:'base!forJcddSave.action'}">井上下作业地点及车间硐室信息</li> <li data-options="attributes:{url:'base!forXtsmSave.action'}">煤矿概况</li> </ul> </li> </ul
Tabs页面
<!doctype html> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/resources/pages/system/inc-easyui.jsp"%> <html> <head> <base href="<%=basePath%>"/> <meta charset="UTF-8"> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="styles/css/blue.css"> <link rel="stylesheet" type="text/css" href="styles/css/easyui.css"> <script type="text/javascript"> $(function(){ }) //根据tree下的iframe下的js获取的addTab数据完成Tab页面数据加载，切换tab页面操作 function addTab(title,url){ var $tabs = $(".easyui-tabs") title = $.trim(title); if ( $tabs.tabs('exists', title)){ $tabs .tabs('select', title);//选中并刷新 var tab = $tabs .tabs('getSelected'); var src = $(tab.panel('options').content).attr('src'); tab.panel("body").find("iframe").attr("src",url); } else { var content = createFrame(url); $tabs .tabs('add',{ title:title, content:content, closable: false }); } } function createFrame(url) { var s = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="100%;height:100%;"></iframe>'; return s; } function closeCurrentTab(){ var $tabs = $(".easyui-tabs"); var tab = $tabs.tabs('getSelected'); var index = $tabs.tabs('getTabIndex',tab); $tabs.tabs("close",index); } </script> <body> <div class="easyui-tabs" fit="true" border="false" data-options="closable:false" ></div> </body> </html>