<%@ 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="width: 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="width: 150px">东部区域</div> -->
<div data-options="region:'south'" style="height: 50px">南部区域</div>
</body>
</html>