目录

目录

-----------------------

我们继续讲布局

full 全屏 布局
<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>

整个body 作为一个布局容器

嵌套布局

        <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>

这个东西 就是 收缩
collapsed:true

视频下载地址

http://pan.baidu.com/s/1sjEpVTr

源码

http://www.bamn.cn/thread-3982-1-1.html

Easyui入门视频教程 第04集---Easyui布局的更多相关文章

  1. Easyui入门视频教程 第05集---Easyui复杂布局

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  2. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...

  3. Easyui入门视频教程 第11集---Window的使用

    目录 Easyui入门视频教程 第11集---Window的使用   Easyui入门视频教程 第10集---Messager的使用  Easyui入门视频教程 第09集---登录完善 图标自定义   ...

  4. Easyui入门视频教程 第09集---登录完善 图标自定义

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  5. Easyui入门视频教程 第08集---登录实现 ajax button的使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  6. Easyui入门视频教程 第06集---Layout初始化和属性方法使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  7. Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境

    Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标 ...

  8. Easyui入门视频教程 第01集---认识Easyui

    认识EasyUI 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax b ...

  9. Easyui入门视频教程 第10集---Messager的使用

    Easyui入门视频教程 第10集---Messager的使用 <script type="text/javascript"> function show(){ $.m ...

随机推荐

  1. 为什么你作为一个.NET的程序员工资那么低?(转)

    最近看到很多抱怨贴,也许有一定的道理,但是你想过没,为什么大部分.NET程序员工资相对低?我个人是这么看的: 大批半罐子水的程序员,永远被局限在.NET的原始的小圈圈里.前端不会(你放弃了一项很重要的 ...

  2. C# XmlTextWriter和XmlTextReader 读写XML文件

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...

  3. 解决eclipse导出javadoc时的“错误: 编码GBK的不可映射字符”问题(转)

    http://blog.csdn.net/psy1100/article/details/51179342 今天要将自己的API接口和MODEL导出来一份java doc参考文档, 但是在导出的时候却 ...

  4. AI-终极算法-遗传算法

  5. Esxi 6.0虚拟机迁移Linux遇到网络配置错误

    在使用vmware迁移linux系统过程中(迁移方式是导出OVF模板和部署OVF模板),发现部署后的linux系统无法启动网卡 报错为 Bringing up interface eth0: Devi ...

  6. (转)思考:矩阵及变换,以及矩阵在DirectX和OpenGL中的运用问题:左乘/右乘,行优先/列优先,...

    转自:http://www.cnblogs.com/soroman/archive/2008/03/21/1115571.html 思考:矩阵及变换,以及矩阵在DirectX和OpenGL中的运用1. ...

  7. Git 常用命令 思维导图(转)

    Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. 本来想着只把最有用.最常用的 Git 命令记下来,但是总觉得这个也挺有用.那个也用 ...

  8. Oracle聚合连接字符串

    问题需求 现有一个数据表,如下: ID    CODE    NAME 1    A    张三 2    A    李四 3    B    王五 4    C    赵六 5    C    孙七 ...

  9. CAD中批量打印

    同事在网上找各种软件来实现CAD图的批量打印,总是问题多多.于是,我想到一个更方便的解决方法,即只要我将一个打印出来,然后就可以用批量处理来实现. 1.在CAD中输入plot命令(或快捷键Ctrl+P ...

  10. OS 获取用户相册。保存图片。编辑图片为圆形

    // // ViewController.m // YunPhoto // // Created by qingyun on 3/4/14. // Copyright (c) 2014 qingyun ...