<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>布局和标签页</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <!-- 通过设置宽度和左右边距auto使form居中 --> <form class="main_form" style="margin:8px auto;width:600px;"> <div>标准的EasyUI东西南北中布局,注意easyui-layout标志着这个div使用布局,而split:true表示区域之间采用分割栏</div> <div class="easyui-layout" style="width:600px;height:300px;"> <div data-options="region:'north'" style="height:32px"></div> <div data-options="region:'south',split:true" style="height:32px;"></div> <div data-options="region:'east',split:true" title="东" style="width:80px;"></div> <div data-options="region:'west',split:true" title="西" style="width:80px;"></div> <div data-options="region:'center',title:'内容区域',iconCls:'icon-ok'">这里是内容区域，注意是通过region:'center'设置的</div> </div> </form> <script type="text/javascript"> </script> </body> </html>
需要注意的是，EasyUI的布局支持嵌套，所以可以在任意区域内再嵌套一个区域。当然，如果只需要左右两列的布局，只需要保存region:'east’和region:'west’即可。
哈哈，看到上面的布局，是不是感觉到很像某个网站后台的管理页面。是的，只要稍加改动，让布局占满整个页面，就是一个精美的后台管理模版了。所以，直接对body设置easyui-layout布局方式就好了，如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>布局和标签页</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:48px;background:#B3DFDA;padding:10px"> 这个地方放一个漂亮的标题栏图片和企业logo </div> <div data-options="region:'west',split:true,title:'菜单栏'" style="width:150px;padding:10px;"> <ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> <li><a href="#">菜单5</a></li> </ul> </div> <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;text-align:center;"> 版权所有区域 </div> <div data-options="region:'center',title:'内容区域'" style="padding:10px;"> 此处放置点击菜单之后对应页面 </div> </body> </html>
本篇的最后，介绍以下tabs标签面板，使用方法也很简单，当对一个div标签采用easyui-tabs样式后，此div会自动的将其内的子div分为不同的标签页。OK，演示如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>标签页</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <div class="easyui-tabs" style="width:500px;height:300px"> <div title="操作" data-options="iconCls:'icon-ok'" style="padding:10px"> 操作页 </div> <div title="帮助" data-options="iconCls:'icon-help',closable:true" style="padding:10px"> 需要注意closable:true表示采用关闭按钮 </div> <div title="第三页" style="padding:10px"> 第三页的内容 </div> </div> </body> </html>
