jQuery EasyUI详解-EasyUI布局和标签页

来源：互联网发布：光良童话知乎编辑：程序博客网时间：2024/06/08 04:11

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>

0 0