jquery easyUI 后盾布局 _Web前端

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"
     }
	}]
}]