1、在整个页面上创建布局（Layout）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>吹泡泡的魚-主页</title>
  5.     <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
  6.     <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
  7.     <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
  8. </head>
  9. <body class="easyui-layout">
  10.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
  11.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
  12.     <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
  13.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
  14.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
  15. </body>
  16. </html>

2、在div中创建布局（Layout）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>吹泡泡的魚-主页</title>
  5.     <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
  6.     <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
  7.     <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
  8. </head>
  9. <body>
  10.     <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
  11.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
  12.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
  13.     <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
  14.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
  15.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
  16. </div>
  17. </body>
  18. </html>

3、创建嵌套布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>吹泡泡的魚-主页</title>
  5.     <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
  6.     <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
  7.     <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
  8. </head>
  9. <body class="easyui-layout">
  10.     <div data-options="region:'north'" style="height:100px"></div>
  11.     <div data-options="region:'center'">
  12.         <div class="easyui-layout" data-options="fit:true">
  13.             <div data-options="region:'west',title:'West',collapsed:true" style="width:180px"></div>
  14.             <div data-options="region:'center'"></div>
  15.         </div>
  16.     </div>
  17. </body>
  18. </html>

data-options详解：

　　布局选项（Layout Options）

名称 类型 描述 默认值
fit boolean

当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。

当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。

 false

　　区域面板选项（Region Panel Options）

名称 类型 描述 默认值
title string 布局面板（layout panel）的标题文本。 null
region string 定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。  
border boolean 当设置为 true 时，就显示布局面板（layout panel）的边框。 true
split boolean 当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。 false
iconCls string 在面板（panel）头部显示一个图标的 CSS class。 null
href string 从远程站点加载数据的 URL 。 null
collapsible boolean 定义是否显示可折叠按钮。 true
minWidth number 面板（panel）最小宽度。 10
minHeight number 面板（panel）最小高度。 10
maxWidth number 面板（panel）最大宽度。 10000
maxHeight number 面板（panel）最大高度。 10000

EasyUI Layout 布局的更多相关文章

  1. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  2. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  3. easyui layout布局的属性说明

    layout布局的属性说明: 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签上创建布局(layout ...

  4. easyui layout 布局title

    <script> function aclick(){ $("a").click(function () { var name=this.innerHTML; $($( ...

  5. EasyUI - Layout 布局控件

    效果: Html代码: <div id="cc" class="easyui-layout" style="width: 600px; heig ...

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

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

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

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

  8. easyui实现树形菜单Tab功能、layout布局

    一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...

  9. easyui中datagrid+layout布局

    1.掌握layout布局 首先,layout布局的具体使用可参考官网http://www.jeasyui.net/plugins/162.html layout布局分为东南西北中五个区域,如图我们将其 ...

随机推荐

  1. luogu P4156 [WC2016]论战捆竹竿

    传送门 官方题解(证明都在这) 神仙题鸭qwq 转化模型,发现这题本质就是一个集合,每次可以加上集合里的数,问可以拼出多少不同的数 首先暴力需要膜意义下的最短路,例题戳这 然后这个暴力可以优化成N^2 ...

  2. 第21月第4天 leetcode codinginterview c++

    1.leetcode Implement strStr(). Returns the index of the first occurrence of needle in haystack, or - ...

  3. js对象数组去重

    <script> var array = [{ greeting: "Hello", nickName: "Aziz" }, { greeting: ...

  4. LOJ #2026「JLOI / SHOI2016」成绩比较

    很好的锻炼推柿子能力的题目 LOJ #2026 题意 有$n$个人$ m$门学科,第$ i$门的分数为不大于$U_i$的一个正整数 定义A「打爆」B当且仅当A的每门学科的分数都不低于B的该门学科的分数 ...

  5. java 基础 浮点类型

    1.浮点类型用于表示小数的数据类型. 2.浮点数原理:也就是二进制科学计数法. 3.Java的浮点类型有float和double两种. 4.Java默认浮点类型计算的结果是double类型,字面量也是 ...

  6. Python 14 Html 基础

    内容概要 html静态页面,标签介绍 HTML简述 定义: HTML,超文本标记语言,写给浏览器的语言,目前网络上应用最广泛的语言.HTML也在不断的更新,最新版本已经出现了HTML5.在HTML5中 ...

  7. WSGI、uwsgi和uWSGI

    一.WSGI WSGI ( Web Server Gateway Interface )是一个网络服务器和网络应用的通用接口的规范或者用于Python框架. 由于python开发人员在网络框架的选择限 ...

  8. 第三节，CNN案例-mnist手写数字识别

    卷积:神经网络不再是对每个像素做处理,而是对一小块区域的处理,这种做法加强了图像信息的连续性,使得神经网络看到的是一个图像,而非一个点,同时也加深了神经网络对图像的理解,卷积神经网络有一个批量过滤器, ...

  9. delphi 控件集

    delphi  控件集: 1)RAIZE 控件包  :http://www.raize.com/devtools/rzcomps/   被收购 Raize Components has been ac ...

  10. 虚拟化之kvm --（vnc控制台）

    作者:邓聪聪 随着日益不同的需求增多,为了满足主机供求,get到这一招虚拟化技术,以增加点见识! 1.使用yum安装: yum -y install qemu-kvm libvirt python-v ...