1.通过标记创建layout.
 记得添加"easyui-layout"样式给div标记.
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">

    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

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

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

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

    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</div>

2.创建一个layout在整个页面.

<body class="easyui-layout">

    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

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

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

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

    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</body>

3.创建嵌套layout

注意那个west panel的内部的布局是折叠的.
<body class="easyui-layout">

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

    <div data-options="region:'center'">

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

            <div data-options="region:'west',collapsed:true" style="width:180px"></div>

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

        </div>

    </div>

</body>

4.通过ajax加载内容.

这个layout的创建是基于panel的,所有内部区域panel提供内置支持通过"URL"异步加载内容,使用异步加载技术,用户可以是他们的layout页面显示快了很多.
<body class="easyui-layout">

    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>

    <div data-options="region:'center',href:'center_content.php'" ></div>

</body>

Easyui几种布局方式的使用的更多相关文章

  1. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  2. Android 常用UI控件之TabHost(1)TabHost的两种布局方式

    TabHost是Android中的tab组件. TabHost布局文件的基本结构 TabHost下有个layout,这个layout中有TabWidget与FrameLayout.TabWidget是 ...

  3. Extjs--12种布局方式

    按照Extjs的4.1的文档来看,extjs的布局方式大致有12种,下面一一介绍,有些代码就是文档中的. 1.Border 边界布局 border布局,最多可以将页面分割为"东南西北中&qu ...

  4. Android-基本控件和详解四种布局方式

    转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...

  5. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

  6. Android 开发之旅：view的几种布局方式及实践

    本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...

  7. Android 开发：view的几种布局方式及实践

    View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Tab ...

  8. 【Android学习】四种布局方式

    一.LinearLayout 线性布局,即一行展开或者一列展开,也可以嵌套,需要注意的属性如下: android:orentation  //对齐方式 二.FrameLayout 帧布局,即一层层叠起 ...

  9. kivy八种布局方式学习

    kivy八种布局:FloatLayout.BoxLayout.AnchorLayout.GridLayout.PageLayout.RelativeLayout.ScatterLayout.Stack ...

随机推荐

  1. shell脚本语法基础汇总

    shell脚本语法基础汇总 将命令的输出读入一个变量中,可以将它放入双引号中,即可保留空格和换行符(\n) out=$(cat text.txt) 输出1 2 3 out="$(cat te ...

  2. 【转】ARM交叉编译工具链

    原文网址:http://www.veryarm.com/cross-tools 为什么要用交叉编译器? 交叉编译通俗地讲就是在一种平台上编译出能运行在体系结构不同的另一种平台上的程序,比如在PC平台( ...

  3. JNI与JNA性能比较

    JNI与JNA性能比较 在介绍JNA时,提到了JNA是基于JNI的,是在JNI上封装了一层,JNI性能不如JNA.最近在网上看到篇简单的比较这两者性能的文档,感觉不错,现转载一下: 分别用JNI和JN ...

  4. OpenCV MFC 模块间通信

    1. 新建MFC项目 点击完成. 2. 添加按钮 在"工具箱"中找到"Button"控件,添加至界面:  2. 配置opencv, 添加colordetecto ...

  5. STL 整理（map、set、vector、list、stack、queue、deque、priority_queue)(转)

    向量(vector) <vector> 连续存储的元素<vector> Vector<int>c; c.back()    传回最后一个数据,不检查这个数据是否存在 ...

  6. apache安装扩展模块

    apache 安装扩展模块 1,首先要确认你是否加载了mod_so模块,这个就是你在编译前参数配置的时候添加-enable-so(启用DSO).如果你没有这模块的话,是无法安装扩展模块的. /usr/ ...

  7. javax inect

    Spring 3 and JSR-330 @Inject and @Named example By mkyong | September 16, 2012 | Viewed : 86,399 tim ...

  8. javascript XMLHttpRequest对象全面剖析

    转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...

  9. LAMP介绍及安装

    LAMP介绍及安装 1. LAMP是什么? LAMP,包含Linux + Apache + PHP + Mysql. LAMP适用环境 适用于追求极致稳定的WEB环境,缺点是需要消耗更多资源. 除了L ...

  10. 克隆虚拟机后修改MAC地址

    克隆后的主机找不到eth0 修改 /etc/udev/rules.d/70-persistent-net.rules 删除原eth0的信息,将eth1的name改为eth0 修改 /etc/sysco ...