首页手记使用EasyUI开发银行业绩统计系统[8]-EasyU...

使用EasyUI开发银行业绩统计系统[8]-EasyUI布局和标签页

标签：

Java Html/CSS

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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.min.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.min.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.min.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>

点击查看更多内容