一、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. Redis搭建（二）：主从复制

    一.引言 Redis有三种集群模式: 第一个就是主从模式 第二种“哨兵”模式,在Redis 2.6版本开始提供,2.8版本稳定 第三种是Cluster集群模式,在Redis 3.x以后的版本才增加进来 ...

  2. duck typing

    在程序设计中,鸭子类型(英语:duck typing)是动态类型的一种风格.在这种风格中,一个对象有效的语义,不是由继承自特定的类或实现特定的接口,而是由"当前方法和属性的集合"决 ...

  3. laravel中间键组

    ` php artisan make:middleware Lend这边我定义一个登陆的中间件这边要注意的就是,当条件成立的时候一定要 return $next($request);不写这个larav ...

  4. 1-在eclipse里面配置python（最详细）

    最近有时间打算学下python,打算学当然是得先搞好开发工具,网上搜一波,发现许多ide,居然可以在eclipse下写python,由于最近一直在搞java,所以已经装了eclipse,所以打算就在e ...

  5. 下载Redis

    1.下载当前Redis 官网:https://redis.io/ 当前稳定版本是4.0.11,如下图,点Download it下面的链接进行下载 2.下载历史版本的Resis 网址: http://d ...

  6. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  7. dataframe 用法总结

    http://pda.readthedocs.io/en/latest/chp5.html data = [] 列表初始化 data = (,) data = {} 字典初始化 data = pd.D ...

  8. HYSBZ 1036 树的统计Count (水题树链剖分)

    题意:中文题. 析:就是直接维护一个最大值和一个和,用线段树维护即可,这个题很简单,但是我卡了一晚上,就是在定位的时候,位置直接反过来了,但是样例全过了...真是... 代码如下: #pragma c ...

  9. 编写高质量代码改善C#程序的157个建议——建议11： 区别对待==和Equals

    建议11: 区别对待==和Equals 在开始本建议之前,首先要明确概念“相等性”.CLR中将“相等性”分为两类:“值相等性”和“引用相等性”.如果用来比较的两个变量所包含的数值相等,那么将其定义为“ ...

  10. java并发机制的底层实现原理

    volatile是轻量级的synchronized,它在多处理器开发中保证了共享变量的"可见性".可见性是说当一个线程修改一个共享变量时,另外一个线程能读到这个修改的值. vola ...