0
点赞
收藏
分享

微信扫一扫

EasyUI中layout布局的简单使用


场景

效果

EasyUI中layout布局的简单使用_css

布局选项(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布局的简单使用_html_02

举报

相关推荐

0 条评论