做一个站点首先要有站点的布局，所谓的布局事实上就是网页的排版。就是说你的网页显示时是什么样子的。

就比方百度的首页：

无论是谁登录。网页都是这个样式的。

EasyUI中的网页布局一共分为五部分，分别为东。西。南，北，中。在设计自己的网页布局时，中间部分是必需要有的。其余四部分能够不用。由于其余四部分的位置是依据中间部分位置来计算的。EasyUI的布局样式有非常多。能够选择自己合适的布局使用，另外能够设置布局中的一些属性值。来使布局更适合自己的网页。

分类

1、基本布局

              

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><div class="easyui-layout" style="width: 700px; height: 350px;">

    <div data-options="region:'north'" style="height: 50px"></div>

    <div data-options="region:'south',split:true" style="height: 50px;"></div>

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

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

    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

        <table class="easyui-datagrid"

            data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">

            <thead>

                <tr>

                    <th data-options="field:'itemid'" width="80">Item ID</th>

                    <th data-options="field:'productid'" width="100">Product ID</th>

                    <th data-options="field:'listprice',align:'right'" width="80">List Price</th>

                    <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>

                    <th data-options="field:'attr1'" width="150">Attribute</th>

                    <th data-options="field:'status',align:'center'" width="60">Status</th>

                </tr>

            </thead>

        </table>

    </div>

</div></span></span>

2、可加入和删除part的布局

 
             

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Add and Remove Layout</h2>

<p>Click the buttons below to add or remove region panel of layout.</p>

<div style="margin: 20px 0;">

    <span>Select Region Panel:</span>

    <select id="region">

        <option value="north">North</option>

        <option value="south">South</option>

        <option value="east">East</option>

        <option value="west">West</option>

    </select>

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>

		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>

</div>

<div id="cc" class="easyui-layout" style="width: 700px; height: 350px;">

    <div data-options="region:'north'" style="height: 50px"></div>

    <div data-options="region:'south',split:true" style="height: 50px;"></div>

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

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

    <div data-options="region:'center',title:'Center'"></div>

</div>

<script type="text/javascript">

    function addPanel() {

        var region = $('#region').val();

        var options = {

            region: region

        };

        if (region == 'north' || region == 'south') {

            options.height = 50;

        } else {

            options.width = 100;

            options.split = true;

            options.title = $('#region option:selected').text();

        }

        $('#cc').layout('add', options);

    }

    function removePanel() {

        $('#cc').layout('remove', $('#region').val());

    }

	</script></span></span>

3、可自己主动适应内容高度的布局


               

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Auto Height for Layout</h2>

<p>This example shows how to auto adjust layout height after dynamically adding items.</p>

<div style="margin: 20px 0;">

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addItem()">Add Item</a>

		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeItem()">Remove Item</a>

</div>

<div id="cc" style="width: 700px; height: 350px;">

    <div data-options="region:'north'" style="height: 50px"></div>

    <div data-options="region:'south'" style="height: 50px;"></div>

    <div data-options="region:'west'" style="width: 150px;"></div>

    <div data-options="region:'center'" style="padding: 20px">

        <p>Panel Content.</p>

        <p>Panel Content.</p>

        <p>Panel Content.</p>

        <p>Panel Content.</p>

        <p>Panel Content.</p>

    </div>

</div>

<script type="text/javascript">

    $(function () {

        $('#cc').layout();

        setHeight();

    });

    function addItem() {

        $('#cc').layout('panel', 'center').append('<p>More Panel Content.</p>');

        setHeight();

    }

    function removeItem() {

        $('#cc').layout('panel', 'center').find('p:last').remove();

        setHeight();

    }

    function setHeight() {

        var c = $('#cc');

        var p = c.layout('panel', 'center');	// get the center panel

        var oldHeight = p.panel('panel').outerHeight();

        p.panel('resize', { height: 'auto' });

        var newHeight = p.panel('panel').outerHeight();

        c.height(c.height() + newHeight - oldHeight);

        c.layout('resize');

    }

	</script></span></span>

4、复杂布局（包括动态菜单条）

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> 
          

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Complex Layout</h2>

<p>This sample shows how to create a complex layout.</p>

<div style="margin: 20px 0;"></div>

<div class="easyui-layout" style="width: 700px; height: 350px;">

    <div data-options="region:'north'" style="height: 50px"></div>

    <div data-options="region:'south',split:true" style="height: 50px;"></div>

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

        <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>

    </div>

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

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

            <div title="Title1" style="padding: 10px;">

                content1

            </div>

            <div title="Title2" data-options="selected:true" style="padding: 10px;">

                content2

            </div>

            <div title="Title3" style="padding: 10px">

                content3

            </div>

        </div>

    </div>

    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

        <div class="easyui-tabs" data-options="fit:true,border:false,plain:true">

            <div title="About" data-options="href:'_content.html'" style="padding: 10px"></div>

            <div title="DataGrid" style="padding: 5px">

                <table class="easyui-datagrid"

                    data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">

                    <thead>

                        <tr>

                            <th data-options="field:'itemid'" width="80">Item ID</th>

                            <th data-options="field:'productid'" width="100">Product ID</th>

                            <th data-options="field:'listprice',align:'right'" width="80">List Price</th>

                            <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>

                            <th data-options="field:'attr1'" width="150">Attribute</th>

                            <th data-options="field:'status',align:'center'" width="50">Status</th>

                        </tr>

                    </thead>

                </table>

            </div>

        </div>

    </div>

</div></span></span>

5、适应全屏的布局

 

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><body class="easyui-layout">

	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>

	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>

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

	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>

	<div data-options="region:'center',title:'Center'"></div>

</body>

</span></span>

6、嵌套的布局

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
           

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Nested Layout</h2>

<p>The layout region panel contains another layout or other components.</p>

<div style="margin: 20px 0;"></div>

<div class="easyui-layout" style="width: 700px; height: 350px;">

    <div data-options="region:'north'" style="height: 50px"></div>

    <div data-options="region:'south',split:true" style="height: 50px;"></div>

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

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

    <div data-options="region:'center',iconCls:'icon-ok'" title="Center">

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

            <div data-options="region:'north',split:true,border:false" style="height: 50px"></div>

            <div data-options="region:'west',split:true,border:false" style="width: 100px"></div>

            <div data-options="region:'center',border:false"></div>

        </div>

    </div>

</div></span></span>

7、无收缩button的布局


           

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>No collapsible button in Layout</h2>

<p>The layout region panel has no collapsible button.</p>

<div style="margin: 20px 0;"></div>

<div class="easyui-layout" style="width: 700px; height: 350px;">

    <div data-options="region:'north'" style="height: 50px"></div>

    <div data-options="region:'south',split:true" style="height: 50px;"></div>

    <div data-options="region:'east',split:true,title:'East',collapsible:false" style="width: 250px;">

        <table id="tt" class="easyui-propertygrid" data-options="

						url: 'propertygrid_data1.json',

						method: 'get',

						showGroup: true,

						fit: true,

						border: false

					">

        </table>

    </div>

    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',href:'_content.html'" style="padding: 10px">

    </div>

</div></span></span>

属性方法

方法
方法名 方法属性 描写叙述
resize none 设置布局大小
panel region 返回指定面板，“region”參数可用值有：north。south，east，west，center。
collapse region 折叠指定面板，“region”參数可用值有：north。south，east。west。
expand region 展开指定面板，“region”參数可用值有：north。south。east，west。
add options 加入指定面板。属性參数是一个配置对象
remove region 移除指定的面板，“region”參数可用值有：north。south，east。west。

方法应用比方：

折叠布局面板：$('#cc').layout('collapse','west'); 

加入西区面板：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">$('#cc').layout('add',{

    region: 'west',

    width: 180,

    title: 'West Title',

    split: true,

});</span></span>

当中设置的属性即西区面板的属性。如region表示面板的位置。width为面板宽度，title为面板标题，split为用户能否够改变面板大小。

布局属性
属性值 属性值类型 描写叙述 默认值
fit boolean 假设设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自己主动最大。
 false
区域属性
属性值 属性值类型 描写叙述 默认值
title string 布局面板标题文本 null
region string 定义布局面板位置，可用的值有：north，south，east，west。center。
border boolean 为true时显示布局面板的边框 true
split boolean 为true时用户能够改变每一面板大小 false
iconCls string 一个包括图标的CSS类的ID。该图标将会显示到面板标题上 null
href string 用于读取远程网站数据的URL链接 null
collapsible boolean 定义是否显示折叠button true
minWidth number 最小面板宽度 10
minHeight number 最小面板高度 10
maxWidth number 最大面板宽度 10000
maxHeight number 最大面板高度 10000

总结

每接触什么东西都认为非常难，事实上就是没有和曾经的知识结合起来，仅仅要以自己学过的知识为基础。再去学自己所谓的新的东西，那么这些东西也就变得简单了。

【EasyUI】——EasyUI的布局的更多相关文章

  1. EasyUI之Layout布局和Tabs页签的使用

    1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...

  2. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  3. Jquery EasyUi实战教程布局篇

    转自:http://www.kwstu.com/ArticleView/kwstu_20139413501290 送给大家一个非常好的后台布局模板,本人后来就选择了这个模板http://www.kws ...

  4. CI 笔记3 （easyui 的layout布局，最小化layout原型）

    在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...

  5. easyui div 上下布局 最大化按钮 隐藏标题

    背景:easyui在做上下布局的时候,上面是数据列表,下面是数据图表.如下图 需要在上下面板右上角加上最大化按钮,以便可以全屏显示.逻辑就是当上面点击最大化时候,隐藏下面,主意:此时需要将下面的div ...

  6. easyui datagrid 高度布局自适应

    最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局(easyui-layout)的问题,经过 ...

  7. easyUI的基础布局easyui-accordion

    ---恢复内容开始--- <html> <head> <meta charset="UTF-8"> <title>树状图</t ...

  8. easyUI的基础布局

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. jquery+easyui主界面布局一例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx ...

  10. Easyui几种布局方式的使用

    1.通过标记创建layout.  记得添加"easyui-layout"样式给div标记. <div id="cc" class="easyui ...

随机推荐

  1. RabbitMQ （一）

    学习RabbitMQ 可以先先了解一下AMQP 简单介绍: AMQP从一开始就设计成为开放标准,以解决众多的消息队列需求和拓扑结构问题,凭借开发,任何人都可以执行这一标准.针对标准编码的任何人都可以和 ...

  2. I/O 多路复用之select、poll、epoll详解

    select,poll,epoll都是IO多路复用的机制.I/O多路复用就是通过一种机制,一个进程可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作.但s ...

  3. Vue 2.0学习（三）指令与事件

    指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,前面已经使用过v-html.v-pre等.指令的主要职责就是当表达式的值改变时,相应地将某些行为应用到DOM上. v- ...

  4. [webpack] devtool里的7种SourceMap[转]

    modle: development cheap-source-map debug 不太方便,不是以原来的文件的形式cheap-module-source-map 可以 debugcheap-modu ...

  5. property staticmathod classmethod 反射

    使用@property 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9999 这显然不合逻 ...

  6. logN判点是否在凸多边形内 HRBUSTOJ1429

    就是利用叉积的性质,如果向量A1到向量A2是顺时针则叉积为负反之为正. 然后我们可以二分的判断找到一个点恰被两条射线夹在一起. 然后我们再判断是否l,r这两个点所连直线与点的关系. 具体资料可以参照这 ...

  7. 范浩强treap 普通平衡树

    增加Split(分裂),Merge(合并)操作,非常好写,时间也不比普通treap慢什么. #include<bits/stdc++.h> using namespace std; str ...

  8. [洛谷P3987]我永远喜欢珂朵莉~

    [洛谷P3987]我永远喜欢珂朵莉~ 题目大意: 给你\(n(n\le10^5)\)个数\(A_{1\sim n}(A_i\le5\times10^5)\),\(m(m\le5\times10^5)\ ...

  9. [POI2012]Squarks

    [POI2012]Squarks 题目大意: 设有\(n\)个互不相同的正整数\(\{X_1,X_2,...,X_n\}\),任取两个\(X_i,X_j(i\ne j)\),能算出\(X_i+X_j\ ...

  10. poj 1456 贪心+STL

    题意:有n个商品,每个商品如果能在截止日期之前售出就会获得相应利益,求能获得的最大利益 一开始对每个时间进行贪心,后来发现后面的商品可以放到之前来卖,然后就wa了 这里就直接对价格排序,把物品尽量放到 ...