<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script> </head> <body class="easyui-layout"> <!-- data-options如果html元素是easyui组件，可以用data-options设置属性 --> <div region="north" style="height: 100px" title="xxx系统">北部区域</div> <div data-options="region:'west'" style=" 150px" title="系统菜单"> <!-- 展示折叠面板 --> <div class="easyui-accordion" data-options="fit:true"> <div title="基本功能"> <a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-save'">点击</a> <script type="text/javascript"> $("#btn").click(function(){ //判断 var r = $("#myTabs").tabs('exists','测试面板'); if(r){ //选中 $("#myTabs").tabs('select','测试面板'); }else{ //调用tabs组件方法。中部区域中tabs选项卡 添加新面板 $("#myTabs").tabs('add',{ title:'测试面板', iconCls:'icon-add', closable:true, content:'<iframe src="../pages/base/area.jsp" frameborder="0" width="100%" height="100%"></iframe>' }); } }) </script> </div> <div title="系统管理"> <ul id="menu" class="ztree"></ul> <script type="text/javascript"> $(function(){ //配置信息 var setting2 = { data: { simpleData: { enable: true, //开启简单数据模式 idKey: "id", //数据标识 pIdKey: "pId", //父节点标识 rootPId: 0 //顶级节点 } }, callback: { onClick: function(event, treeId, treeNode){ //单击事件 //判断节点是否可以点击 // alert(treeNode.page); if(treeNode.page != undefined){ //treeNode,单击某一节点数据：json对象 //{ "id":"111", "pId":"11", "name":"基础档案设置", "page":"pages/base/archives.jsp"}, // alert(treeNode); // console.info(treeNode);//在浏览器控制台输出 //判断 var r = $("#myTabs").tabs('exists',treeNode.name); if(r){ //选中 $("#myTabs").tabs('select',treeNode.name); }else{ //调用tabs组件方法。中部区域中tabs选项卡 添加新面板 $("#myTabs").tabs('add',{ title:treeNode.name, iconCls:'icon-add', closable:true, content:'<iframe src="../'+treeNode.page+'" frameborder="0" width="100%" height="100%"></iframe>' }); } } } } }; //数据从json文件中 $.post("../data/menu.json",{},function(data){ $.fn.zTree.init($("#menu"), setting2, data); }); }) </script> </div> </div> </div> <div data-options="region:'center'"> <!-- 展示选项卡面板 --> <div id="myTabs" class="easyui-tabs" data-options="fit:true"> <div title="基本功能"></div> </div> </div> <!-- <div data-options="region:'east'" style=" 150px">东部区域</div> --> <div data-options="region:'south'" style="height: 50px">南部区域</div> </body> </html>