目录

目录

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

我们继续讲布局

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. RV LayoutManager 流式布局 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  2. jQuery操作Frame(iFrame)

    没找到很好的方法只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames["iframe1"].docu ...

  3. 在Web应用程序中执行计划任务(多线程)

    在业务复杂的应用程序中,有时候会要求一个或者多个任务在一定的时间或者一定的时间间隔内计划进行,比如定时备份或同步数据库,定时发送电子邮件等,我们称之为计划任务.实现计划任务的方法也有很多,可以采用SQ ...

  4. extern外部方法使用C#简单例子

    外部方法使用C#简单例子 1.增加引用using System.Runtime.InteropServices; 2.声明和实现的连接[DllImport("kernel32", ...

  5. Android Studio快速集成讯飞SDK实现文字朗读功能

    今天,我们来学习一下怎么在Android Studio快速集成讯飞SDK实现文字朗读功能,先看一下效果图: 第一步 :了解TTS语音服务 TTS的全称为Text To Speech,即“从文本到语音” ...

  6. Android -- 屏幕亮度

    获取屏幕亮度 int getScreenBrightness(Activity activity) { int value = 0; ContentResolver cr = activity.get ...

  7. JAVA-Eclipse中web-inf和meta-inf文件夹

    WEB-INF     /WEB-INF/web.xml        你的Web应用程序配置文件,这是一个XML文件,其中描述了 servlet 和其他的应用组件配置及命名规则:  /WEB- IN ...

  8. windows vs2017环境下编译webkit 2

    WebKit在Windows上 内容 安装开发工具 设置Git存储库 设置支持工具 构建WebKit 安装Cygwin(可选) 得到一个崩溃日志 本指南提供了用于构建WebKit的指令在Windows ...

  9. (算法)AA制

    题目: A.B.C.D四个人去吃大餐,吃饭去说好,付钱时AA制,但最后结账时,因为4个人带的钱不一样多,最后A付了112元,B付了86元,C付了10元,D没带钱,所以没有付: 但AA制需要平摊餐费,所 ...

  10. Android 模仿QQ风格的 UI

    本文内容 环境 演示模仿QQ风格的界面 本文主要演示的是 UI,如何模仿 QQ 风格的界面.虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 ...