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布局分为东南西北中五个区域,如图我们将其 ...
随机推荐
- 使用Python的turtle库画圣诞树
代码如下: from turtle import * import random import time n = 80.0 speed("fastest") screensize( ...
- 第24月第30天 scrapy《TensorFlow机器学习项目实战》项目记录
1.Scrapy https://www.imooc.com/learn/1017 https://github.com/pythonsite/spider/tree/master/jobboleSp ...
- JSON格式说明
JSON的优点 相比XML拥有更简单的格式. 不同WEB浏览器处理的结果一样. 纯文本数据交换格式. JSON格式特点 {} 对象定义域 key:value 定义属性 key 字符串格式,value ...
- Django REST Framework API Guide 04
本节大纲 1.serializers 1.Serializers Serializers允许复杂的数据,像queryset和模型实例转换成源生的Python数据类型.从而可以更简单的被渲染成JSON, ...
- Java-Servlet--《12-WEB应用中的普通Java程序如何读取资源文件.mp4》 有疑问
\第五天-servlet开发和ServletConfig与ServletContext对象\12-WEB应用中的普通Java程序如何读取资源文件.mp4; 多层时,DAO为了得到资源文件中的配置参数: ...
- Linux 如何通过命令查看一个文件的某几行(中间几行或最后几行)
linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...
- 给你的Linux系统上点stress【转】
转自:https://blog.csdn.net/sunvince/article/details/7187768 from: http://blog.yufeng.info/archives/202 ...
- 设计模式C++学习笔记之十五(Composite组合模式)
15.1.解释 概念:将对象组合成树形结构以表示“部分-整体”的层次结构.Composite使得用户对单个对象和组合的使用具有一致性. main(),客户 CCorpNode,抽象基类,实现基本信 ...
- boost 实现http断点续传
// testc.cpp : Defines the entry point for the console application. // #include "stdafx.h" ...
- VC++、MFC最好的开源项目
介绍:介绍一下用VC++/MFC写的最好的开源项目. Sourceforge.net中有许多高质量的VC++开源项目,我列举了一些可以作为VC++程序员的参考. 正文: VC++.MFC中最好的开源项 ...