一、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. std::mutex与pthread mutex区别

    Linux下 pthread mutex * PTHREAD_MUTEX_TIMED_NP,这是缺省值,也就是普通锁.当一个线程加锁以后,其余请求锁的线程将形成一个等待队列,并在解锁后按优先级获得锁. ...

  2. 为什么rand和srand总是同时出现？

    如果没有srand,那么rand在我电脑上运行每次返回的随机数是一样的.如果如果先调用srand,而且srand的参数不一样,那么最后产生的随机数就会不一样?那怎么然srand的参数是不一样的呢? 是 ...

  3. R 如何 隐藏坐标轴

    x = c(7,5,8)dim(x)<-3names(x)<-c("apple","banana", "cherry")plot ...

  4. Smarty3——复合变量修饰器输

    你可以联合使用多个修饰器. 它们会按复合的顺序来作用于变量,从左到右. 它们必须以| (竖线)进行分隔,以‘:’号设置参数 {$articleTitle} {$articleTitle|upper|s ...

  5. Django rest_framework----序列化组件

    生成hypermedialink serializer.pclass BookModelSerializers(serializers.ModelSerializer): class Meta: mo ...

  6. 远程访问Function时报错Remote table-valued function calls are not allowed.

    开始是这样调用的:select * from [LinkedServer].[db name].dbo.[function name](param1, param2) 原因: Only table-v ...

  7. 编写高质量代码改善C#程序的157个建议——建议54：为无用字段标注不可序列化

    建议54:为无用字段标注不可序列化 序列化是指这样一种技术:把对象转变成流.相反过程,我们称为反序列化.在很多场合都需要用到这项技术. 把对象保存到本地,在下次运行程序的时候,恢复这个对象. 把对象传 ...

  8. Slf4j MDC 使用和 基于 Logback 的实现分析

    前言 如今,在 Java 开发中,日志的打印输出是必不可少的, 关于  有了日志之后,我们就可以追踪各种线上问题.但是,在分布式系统中,各种无关日志穿行其中,导致我们可能无法直接定位整个操作流程.因此 ...

  9. 20145218张晓涵_Exp5 MSF基础应用

    20145218张晓涵_Exp5 MSF基础应用 实验原理 MS08-067漏洞描述 MS08-067漏洞的全称为"Windows Server服务RPC请求缓冲区溢出漏洞",如果 ...

  10. jenkins slave Windows 2008 R2

    布置jenkins,添加节点(win2008R2) 配置节点参考: http://www.cnblogs.com/juddhu/archive/2013/07/18/3198191.html 生效la ...