EasyUI–布局和标签页详解

EasyUI的布局非常简单,但是也能充分满足网页日常的布局,先来一个最基本的例子:
这里写图片描述

<%@ 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>

如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页