EasyUI Layout 布局

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 布局的更多相关文章

布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
jQuery easyui layout布局自适应浏览器大小(转)
首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...
easyui layout布局的属性说明
layout布局的属性说明: 名称类型描述默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签上创建布局(layout ...
easyui layout 布局title
<script> function aclick(){ $("a").click(function () { var name=this.innerHTML; $($( ...
EasyUI - Layout 布局控件
效果: Html代码: <div id="cc" class="easyui-layout" style="width: 600px; heig ...
EasyUI之Layout布局和Tabs页签的使用
1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...
第二百零二节，jQuery EasyUI，Layout(布局)组件
jQuery EasyUI,Layout(布局)组件学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
easyui实现树形菜单Tab功能、layout布局
一:常见三种前端ui框架在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...
easyui中datagrid+layout布局
1.掌握layout布局首先,layout布局的具体使用可参考官网http://www.jeasyui.net/plugins/162.html layout布局分为东南西北中五个区域,如图我们将其 ...

随机推荐

learn
1.JQ (随时) 2.微信小程序(关注群,专栏知乎,自己申请一个小程序弄个实战) 3.支付宝小程序(2017.08.18 新生代类似微信api) 4.vue(优秀的mvvm框架,手机端主流) 5. ...
Debian 为firefox安装flash插件以及音频驱动
1. flash下载地址:http://get.adobe.com/cn/flashplayer/ lv@lv:~/Downloads$ tar -zxvf flash_player_npapi_li ...
Python学习笔记-转义字符
Python转义字符同C语言的转义字符
Python使用MySQL数据库【转】
转自 Python使用MySQL数据库(新)[很详细][fetchall和fetchmany有啥区别呢?] - CSDN博客https://blog.csdn.net/u011350541/artic ...
对比Dijakstra和优先队列式分支限界
Dijakstra和分支限界都是基于广度优先搜索,如果说两者都是生成一棵树,那Dijakstra总是找距离树根最近的(属于贪心算法),优先队列式分支限界是在层遍历整棵搜索树的同时剪去达不到最优的树枝. ...
C# 基础之string[,] 和string[][]
昨天做项目时碰到一个问题,后台返回一张关系表,里面就两个字段,简化为A,B字段(1:N的关系),一个A对应多个B字段. 由于对于string[,] 和string[][] 的认识不到位,刚开始搞错了数 ...
VC 为程序创建快捷方式的详细讲解
有时候,为了方便用户使用我们编写的程序,需要在桌面,快速启动或程序组中创建程序的快捷方式.下面就介绍在VC下如何为程序创建快捷方式. 一．得到桌面,快速启动或程序组的路径这里介绍二个win32 API ...
shell 学习之if语句
bash中如何实现条件判断?条件测试类型: 整数测试字符测试文件测试一.条件测试的表达式: [ expression ] 括号两端必须要有空格 [[ expres ...
lua io.read()
io.read(...) 从文件中读取内容,还有另外一种写法就是 file:read() 后面可以跟的读取方式有: (1) "n" 读取一个数字,这是唯一一个返回数字而不是字符串 ...
配置percona mysql server 5.7基于gtid主主复制架构
配置mysql基于gtid主主复制架构环境: 操作系统 centos7. x86_64 mysql版本:Percona-Server-- 测试环境: node1 10.11.0.210 node2 ...

EasyUI Layout 布局

EasyUI Layout 布局的更多相关文章

随机推荐

热门专题