04-EasyUI尚硅谷-Layout布局
这只是基本的布局，可以在其基础上扩展：
<%@ 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>Layout</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div id="myLayout" fit="true" class="easyui-layout" style="width:100%;height:100%;">
<div region="north" title="North Title" split="false" style="height:100px;"></div>
<!-- <div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div> -->
<div region="west" split="true" title="West" collapsed="false" style="width:200px;">
<div id="aa" fit="true" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" iconCls="icon-reload" selected="true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</div>
<div region="center" title="center title" style="padding:5px;">
<div id="tt" fit="true" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">
tab3
</div>
</div>
</div>
</div>
<!-- js放在body中才会执行，放在head中是不会执行的 -->
<script type="text/javascript">
$(function() {
//alert("我也执行了！");
});
</script>
</body>
</html>
效果：
浙公网安备 33010602011771号