目录

目录

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

我们继续讲布局

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. Solr4.4入门，介绍Solr的安装、IK分词器的配置及高亮查询结果(转)

    一.Windows下安装solr-4.4.0 1.  下载solr.4.4 2.  下载绿色版tomcat6.0.18 3.  解压下载的solr到d:\study\solr,将dist目录下的sol ...

  2. 随机蕨(Random Fern)

    最近在做 Zdenek Kalal 的 TLD 算法,其成果发表在CVPR 2010 上,文章的名字叫做 P-N Learning: Bootstrapping Binary Classifiers ...

  3. Android学习资料总结

    从事ASP.NET Web开发两年了,主要是做Web项目(ASP.NET WebForm和ASP.NET MVC),也做过C/S架构的企业内部系统,偶然接触Android,学艺不精,项目没做出什么,倒 ...

  4. IOS开发之自定义UITabBarController

    UITabBarController是开发中经常会用到的一个视图控制器,但是默认的UITabBarController经常不能够完全满足我们的需求,所以我们经常需要自定义一个UITabBarContr ...

  5. grunt-cmd-transport提取deps[]的BUG

    该BUG已经在GitHub上提了issue,详见:#56 文件 // employee/static/adder.js define(function (require, exports) { exp ...

  6. Spring（二十二）：Spring 事务

    事务简介: 事务管理是企业级应用程序开发中必不可少的技术,用来确保数据的完整性和一致性. 事务就是一系列的动作,它们被当做一个单独的工作单元.这些动作要么全部完成,要么全部不起作用. 事务的是四个关键 ...

  7. RAMPS1.4 3d打印控制板接线与测试5

    切片软件是生产打印机主控板可以识别的代码(Gcode)的工具,没有这个软件的帮忙,打印机不能识别3d模型文件.这里暂时只介绍Slic3r这个切片软件.简单好用功能强大. 1.打开expert模式 Sl ...

  8. retrofit+RXjava二次封装

    接入说明:项目中已集成RXjava,RXandroid.Retrofit,为避免包冲突,不须要再次接入. 就可以直接使用RXjava,Retrofit的所有api. github地址:https:// ...

  9. iOS 按钮拖动。

    -(void)testMove { moveBtn = [[UIButton alloc ]init]; moveBtn.frame = CGRectMake(0, 30, 60, 60); move ...

  10. 003-Go初探Iris

    1.参考资源:https://iris-go.com/v10/start#Getting-Started 2.首先下载:go get -u github.com/kataras/iris,此处时间较长 ...