jquery easyUI 后盾布局
jquery easyUI 后台布局
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>test</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>themes/default/easyui.css">
<script type="text/javascript" src="<%=basePath%>js/base/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/base/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('body').layout("collapse","south");
$('#tt2').tree({
url: 'tree_data.json',
onClick:function(node){
//$(this).tree('toggle', node.target);
//alert('you dbclick '+node.text);
$("#iframe").attr("src",node.attributes.url);
}
});
});
</script>
</head>
<body class="easyui-layout">
<div id="mymenu" style="width:150px;">
<div>item1</div>
<div>item2</div>
</div>
<div region="north" title="North Title" split="true" style="height:50px;padding:10px;">
</div>
><%--
<div region="east" iconCls="icon-reload" title="Tree Menu" split="true" style="width:180px;">
<ul class="easyui-tree" url="tree_data.json"></ul>
</div>
--%><div region="west" split="true" title="West Menu" style="width:150px;padding1:1px;overflow:hidden;">
<ul id="tt2" class="easyui-tree"></ul>
</div>
<div region="center" title="Main Title" style="overflow:hidden;">
<iframe id="iframe"width="100%" height="100%" src="http://www.baidu.com">
</iframe>
</div>
<div region="south" layout="collapse" title="South Title" collapsible="true" style="height:100px;padding:10px;background:#efefef;">
</div>
</body>
</html>
[{
"id":1,
"text":"供应商管理",
"iconCls":"icon-ok",
"children":[{
"id":2,
"text":"供应商管理",
"checked":true
,"attributes":{
"url":"suppliers/index.zul"
}
}]
},{
"id":2,
"text":"对象管理",
"iconCls":"icon-ok",
"children":[{
"id":2,
"text":"对象管理",
"checked":true
,"attributes":{
"url":"targets/index.zul"
}
}]
}]