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

<!DOCTYPE html>

<html>

<head>

    <title>吹泡泡的魚-主页</title>

    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">

    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>

</head>

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

</html>

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

<!DOCTYPE html>

<html>

<head>

    <title>吹泡泡的魚-主页</title>

    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">

    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>

</head>

<body>

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

</body>

</html>

3、创建嵌套布局

<!DOCTYPE html>

<html>

<head>

    <title>吹泡泡的魚-主页</title>

    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">

    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>

</head>

<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',title:'West',collapsed:true" style="width:180px"></div>

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

        </div>

    </div>

</body>

</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. Python的参数类型

    参数类型: 1.必填参数,位置参数(positional arguments,官方定义,就是其他语言所说的参数) 2.默认值参数,非必传 3.可变参数,非必传,不限制参数个数,比如说给多个人发邮件,发 ...

  2. sql-connectionStrings

    <connectionStrings> <add name="ClassReservatConnectionString" connectionString=&q ...

  3. pythonのpygame安装

    本地环境: python 3.7.0 windows7 64bit pip pygame地址: https://www.lfd.uci.edu/~gohlke/pythonlibs/#pygame 通 ...

  4. 序列化 java.io.Serializable

    1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态,并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保存Object States,但是Java给你提供一种应该比 ...

  5. android listView功能简介

    本文参考连接:http://blog.csdn.net/kesenhoo/article/details/7196920 android中listView是非常常用的组建,下边就经常用到的功能做一下简 ...

  6. ROS tf 两个常用的函数

    /** \brief Get the transform between two frames by frame ID.   * \param target_frame The frame to wh ...

  7. Java9 新特性

    Java9中的9个新特性 1. Java 平台级模块系统 2. Linking 3. JShell: 交互式 Java REPL 4. 改进的 Javadoc 5. 集合工厂方法 6. 改进的 Str ...

  8. 设计模式C++学习笔记之十三（Decorator装饰模式）

      装饰模式,动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 13.1.解释 main(),老爸 ISchoolReport,成绩单接口 CFourt ...

  9. oracle 多行变一行 wmsys.wm_concat

    背景        还是那个问题,部分程序员喜欢用sql解决问题.发现了这个函数,当初真是大喜过望,现在是哭笑不得.10g支持这个函数,11好像不支持了,而且只有oracle支持,其实自己写个通用方法 ...

  10. Android-创建一个简单的用户接口-(补day2内容)

    如果按照之前的布局设置,那么输入框和按钮组件的大小就会是刚好满足它们的内容的.如图1. 图1.输入框和按钮宽度设置为”wrap_content” 这样的设置是可以满足按钮的,但不能满足输入框的要求,因 ...