一、layout页面布局

　　EasyUI布局容器包括东、西、南、北、中五个区域，其中中心面板是必须的，而东、西、南、北这四个面板是可选的，如果布局里面不需要东、西、南、北这四个面板，那么可以把相应的div删掉，另外，如果需要创建复杂的easyUI布局，那么可以通过嵌套东、西、南、北、中五个面板来实现。下面简单演示一下EasyUI布局。

1.1 通过div创建easyUI布局

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>通过div创建EasyUI的layout布局</title>

    <!--引入JQuery-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>

    <!--引入EasyUI-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>

    <!--引入EasyUI的中文国际化,让EasyUI支持中文-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>

    <!--引入EasyUI的样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" type="text/css"/>

    <!-- 引入EasyUI的图标样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/icon.css" type="text/css"/>

</head>

<body>

    <!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->

    <div class="easyui-layout" style="width: 600px;height: 400px;margin: 0 auto;">

        <!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->

        <div data-options="region:'north',title:'North Title',split:true" style="heigtht:100px;"></div>

        <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->

        <div data-options="region:'south',title:'South Title',split:true" style="heigtht:100px;"></div>

        <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->

        <div data-options="region:'west',iconCls:'icon-reload',title:'West Title',split:true" style="width:100px;"></div>

        <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->

        <div data-options="region:'east',title:'East Title',split:true" style="width:100px;"></div>

        <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->

        <div data-options="region:'center',title:'Center Title',split:true" style="padding:5px;"></div>

    </div>

</body>

</html>

　　运行结果如下：

　　

1.2 通过body创建easyUI布局

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>通过body创建EasyUI的layout布局</title>

    <!--引入JQuery-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>

    <!--引入EasyUI-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>

    <!--引入EasyUI的中文国际化,让EasyUI支持中文-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>

    <!--引入EasyUI的样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" type="text/css"/>

    <!-- 引入EasyUI的图标样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/icon.css" type="text/css"/>

</head>

<!--给body指定class属性指定easy的easyui-layout样式，这样就可以通过body创建easyui的layout -->

<body class="easyui-layout">

        <!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->

        <div data-options="region:'north',title:'North Title',split:true" style="heigtht:100px;"></div>

        <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->

        <div data-options="region:'south',title:'South Title',split:true" style="heigtht:100px;"></div>

        <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->

        <div data-options="region:'west',iconCls:'icon-reload',title:'West Title',split:true" style="width:100px;"></div>

        <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->

        <div data-options="region:'east',title:'East Title',split:true" style="width:100px;"></div>

        <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->

        <div data-options="region:'center',title:'Center Title',split:true" style="padding:5px;"></div>

</body>

</html>

　　运行结果如下：

　　

1.3 嵌套easyui-layout创建复杂布局

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>使用嵌套easyui-layout来创建复杂布局</title>

    <!--引入JQuery-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>

    <!--引入EasyUI-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>

    <!--引入EasyUI的中文国际化,让EasyUI支持中文-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>

    <!--引入EasyUI的样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" type="text/css"/>

    <!-- 引入EasyUI的图标样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/icon.css" type="text/css"/>

</head>

<!--给body指定class属性指定easy的easyui-layout样式，这样就可以通过body创建easyui的layout -->

<body class="easyui-layout">

        <!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->

        <div data-options="region:'north',title:'North Title',split:true" style="heigtht:100px;"></div>

        <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->

        <div data-options="region:'west',iconCls:'icon-reload',title:'West Title',split:true" style="width:100px;"></div>

        <div data-options="region:'center'">

            <!--嵌套布局-->

            <div class="easyui-layout" data-options="fit:true">

                <!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->

                <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

                <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->

                <div data-options="region:'south',title:'South Title',split:true" style="heigtht:100px;"></div>

                <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->

                <div data-options="region:'east',title:'East Title',split:true" style="width:100px;"></div>

                <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->

                <div data-options="region:'west',title:'West Title',split:true" style="width:100px;"></div>

                <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->

                <div data-options="region:'center',title:'Center Title',split:true" style="padding:5px;"></div>

            </div>

        </div>

</body>

</html> 

　　运行结果如下：

　　

1.4 通过Javascript创建easyUI布局

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>通过JavaScript来创建EasyUI布局</title>

    <!--引入JQuery-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>

    <!--引入EasyUI-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>

    <!--引入EasyUI的中文国际化,让EasyUI支持中文-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>

    <!--引入EasyUI的样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" type="text/css"/>

    <!-- 引入EasyUI的图标样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/icon.css" type="text/css"/>

    <script type="text/javascript">

        $(function () {

            //画面加载完成之后就调用layout()方法将body变成easy的layout

            $("#easyUILayoutBody").layout();

        });

    </script>

</head>

<!--给body指定class属性指定easy的easyui-layout样式，这样就可以通过body创建easyui的layout -->

<body id="easyUILayoutBody">

        <!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->

        <div data-options="region:'north',title:'North Title',split:true" style="heigtht:100px;"></div>

        <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->

        <div data-options="region:'west',iconCls:'icon-reload',title:'West Title',split:true" style="width:100px;"></div>

        <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->

        <div data-options="region:'center',title:'Center Title',split:true" style="padding:5px;"></div>

</body>

</html>

　　运行结果如下：

　　

二、accordion(折叠面板)

　　　　<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->

        <div data-options="region:'west',iconCls:'icon-reload',title:'West Title',split:true" style="width:100px;">

            <!--制作accordion折叠面板

                fit:true——自适应

            -->

            <div class="easyui-accordion" data-options="fit:true">

                <!--使用子div表示每个面板-->

                <div data-options="iconCls:'icon-cut'" title="面板一">111</div>

                <div title="面板二">222</div>

                <div title="面板三">333</div>

            </div>

        </div>

　　运行结果如下：

　　

三、tabs(选项卡)

<!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->

<div data-options="region:'center',title:'Center Title',split:true" style="padding:5px;">

    <!--制作一个tabs选项卡面板-->

    <div class="easyui-tabs" data-options="fit:true">

        <!--使用子div表示每个面板-->

        <div data-options="iconCls:'icon-cut'" title="面板一">111</div>

        <div data-options="closable:true" title="面板二">222</div>

        <div title="面板三">333</div>

    </div>

</div>

　　运行结果如下：

　　 

3.1 动态添加选项卡

  • 用于动态添加一个选项卡

　　

  • 选中指定的选项卡和判断某个选项卡是否存在

　　

　　

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>通过JavaScript来创建EasyUI布局</title>

    <!--引入JQuery-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>

    <!--引入EasyUI-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>

    <!--引入EasyUI的中文国际化,让EasyUI支持中文-->

    <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>

    <!--引入EasyUI的样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" type="text/css"/>

    <!-- 引入EasyUI的图标样式文件-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/icon.css" type="text/css"/>

    <script type="text/javascript">

        $(function () {

            // 页面加载完成后,为btn1按钮绑定事件

            $("#btn1").click(function () {

                // 判断"系统管理"选项卡是否存在

                var e = $("#mytabs").tabs("exists","系统管理");

                if (e) {

                    // 如果存在,选中即可

                    $("#mytabs").tabs("select", "系统管理");

                } else {

                    //调用tabs对象的add方法动态添加一个选项卡

                    $("#mytabs").tabs("add",{

                        title:'系统管理',

                        iconCls:'icon-edit',

                        closable:true

                    });

                }

            });

        });

    </script>

</head>

<!--给body指定class属性指定easy的easyui-layout样式，这样就可以通过body创建easyui的layout -->

<body class="easyui-layout">

        <!-- 布局中如果不需要north这个面板,那么可以删掉这个div -->

        <div data-options="region:'north',title:'North Title'" style="heigtht:100px;"></div>

        <!-- 布局中如果不需要west这个面板,那么可以删掉这个div -->

        <div data-options="region:'west',iconCls:'icon-reload',title:'West Title'" style="width:200px;">

            <!--制作accordion折叠面板

                fit:true——自适应

            -->

            <div class="easyui-accordion" data-options="fit:true">

                <!--使用子div表示每个面板-->

                <div data-options="iconCls:'icon-cut'" title="面板一">

                    <a id="btn1" class="easyui-linkbutton">添加一个选项卡</a>

                </div>

                <div title="面板二">222</div>

                <div title="面板三">333</div>

            </div>

        </div>

        <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->

        <div data-options="region:'center',title:'Center Title'" style="padding:5px;">

            <!--制作一个tabs选项卡面板-->

            <div id="mytabs" class="easyui-tabs" data-options="fit:true">

                <!--使用子div表示每个面板-->

                <div data-options="iconCls:'icon-cut',closable:true" title="系统管理">111</div>

                <div data-options="closable:true" title="财务管理">222</div>

                <div title="人事管理">333</div>

            </div>

        </div>

</body>

</html>

参考：https://www.cnblogs.com/xdp-gacl/p/4088198.html

EasyUI学习笔记（二）—— Layout的更多相关文章

  1. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  2. amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  3. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  4. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  5. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  6. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  7. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  8. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  9. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

  10. NumPy学习笔记 二

    NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...

随机推荐

  1. file_get_content() 超时

    set_time_limit 只能影响php 程序的超时时间. file_get_contents 读取的是URL的超时时间.   因此 set_limit_limit 对file_get_conte ...

  2. 734. Sentence Similarity 有字典数组的相似句子

    ［抄题］: Given two sentences words1, words2 (each represented as an array of strings), and a list of si ...

  3. java基础面试题 背过1

    web.xml文件中可以配置哪些内容? 答:web.xml用于配置Web应用的相关信息,如:监听器(listener) ContextLoaderListener .过滤器(filter) Strut ...

  4. Luogu 4784 [BalticOI 2016 Day2]城市

    斯坦纳树复习,我暑假的时候好像写过[JLOI2015]管道连接来着. 设$f_{i, s}$表示以$i$为根,$k$个重要点的连通状态为$s$,($0$代表没有连进最小生成树里面去,$1$代表连进了最 ...

  5. JavaWeb中的路径问题

    JavaWEB 开发中的 / 的含义 ①.当前WEB应用的根路径(http://localhost:8080/contextPath/) 请求转发时:request.getRequestDispath ...

  6. hdu 4279 Number（G++提交）

    打表找规律: #include<stdio.h> #include<math.h> #define N 250 bool judge(int i,int j) { ;k< ...

  7. Java基础语法(二)<运算符>

    运算符: 下面的都是相关的练习: 1.键盘录入一个三位整数数,请分别获取该三位数上每一位的数值 import java.util.Scanner; public class Test02 { publ ...

  8. 使用Sqlserver事务发布实现数据同步(转)

    出处:http://www.cnblogs.com/daizhj/archive/2009/11/18/1605293.html 事务的功能在sqlserver中由来已久,因为最近在做一个数据同步方案 ...

  9. （回溯法）ip地址的合理性

    题目: 给定一个只包含数字的字符串,通过返回所有可能有效的IP地址组合来恢复它. 例如: 给定“”, return [“255.255.11.135”,“255.255.111.35”]. (顺序无所 ...

  10. 关于Gridview激发了未处理的事件“RowDeleting”错误的处理

    关于通过RowCommend事件执行删除操作时,提示 Gridview激发了未处理的事件“RowDeleting”错误的处理: <asp:TemplateField HeaderText=&qu ...