场景

效果

布局选项（Layout Options）

名称	类型	描述	默认值
fit	boolean	当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。	false

区域面板选项（Region Panel Options）

区域面板选项（Region Panel Options）是定义在面板（panel）组件中，下面是一些共同的和新增的属性：

名称	类型	描述	默认值
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

方法

名称	参数	描述
resize	none	设置布局（layout）的尺寸。
panel	region	返回指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'、'center'。
collapse	region	折叠指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'。
expand	region	展开指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'。
add	options	添加一个指定的面板（panel），options 参数一个配置对象，更多细节请参阅标签页面板（tab panel）属性。
remove	region	移除指定的面板（panel），'region' 参数可能的值：'north'、'south'、'east'、'west'。

实现

简单layout布局的实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/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>

在整个页面上创建布局

将class="easyui-layout"放在body上

<body class="easyui-layout">

layout动态加载内容

新建动态加载页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
动态加载内容
</body>
</html>

添加href属性实现动态加载内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/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',href:'dynamic.html'" style="padding:5px;background:#eee;"></div>
</div>
</body>
</html>

效果

EasyUI中layout布局的简单使用相关推荐

EasyUI之Layout布局
视频课:https://edu.csdn.net/course/play/7621 Layout布局,是按照上北,下南,左西右东,center居中的布局方式.主要属性:region设置布局的方向,st ...
EasyUI中Panel面板的简单使用
场景效果属性名称类型描述默认值 id string 面板(panel)的 id 属性. null title string 显示在面板(panel)头部的标题文字. null iconCl ...
ExtJS中layout布局详解
layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种,现一一举例: 1.absolute根据字面意思就知道,是根 ...
EasyUI中Dialog对话框的简单使用
场景效果属性该属性扩展自窗口(window)下面是为对话框(dialog)重写的属性. 名称类型描述默认值 title string 对话框的标题文本. New Dialog collap ...
EasyUI中菜单Menu的简单使用
场景效果菜单项菜单项(menu item)代表一个显示在菜单中的单独的项目.它包含下列属性: 名称类型描述默认值 id string 菜单项(menu item)的 id 属性. te ...
EasyUI中Calendar日历的简单使用
场景效果属性名称类型描述默认值 width number 日历(calendar)组件的宽度. 180 height number 日历(calendar)组件的高度. 180 fit b ...
EasyUI中Window窗口的简单使用
场景效果属性该属性扩展自面板(panel),下面是为窗口(window)重写和添加的属性. 名称类型描述默认值 title string 窗口的标题文本. New Window colla ...
EasyUI中进度条的简单使用
场景效果属性名称类型描述默认值 width string 设置进度条(progressbar)的宽度. auto height number 组件的高度.该属性自版本 1.3.2 起可用. ...
EasyUI中搜索框的简单使用
场景基本搜索框流式搜索框搜索框类别实现基本搜索框 <!DOCTYPE html> <html lang="en"> <head>< ...

EasyUI中layout布局的简单使用

场景

效果

布局选项（Layout Options）

区域面板选项（Region Panel Options）

方法

实现

简单layout布局的实现

在整个页面上创建布局

layout动态加载内容

效果

EasyUI中layout布局的简单使用相关推荐

最新文章

热门文章