二、easyUI中的layout（布局）组件

怀梦

已于 2023-05-16 15:16:17 修改

阅读量925

点赞数 1

分类专栏： easyUI快速入门文章标签： easyui 前端 javascript

于 2023-05-16 14:57:58 首次发布

本文链接：https://blog.csdn.net/weixin_44230693/article/details/130705698

版权

easyUI快速入门专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章介绍了EasyUI布局组件的基本概念和使用方法，包括布局的五个区域（北、南、东、西、中）以及面板的可调整大小和折叠功能。通过示例代码展示了如何创建一个包含北、南、东、西区域的布局，并讨论了面板的属性如region、title、split等。最后，提供了修改布局以适应父容器和自定义面板标题的代码示例。

摘要由CSDN通过智能技术生成

1.layout（布局）组件的概述

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

在这里插入图片描述

2.layout（布局）组件的使用

新建一个02-layout.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout（布局）组件</title>
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/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',iconCls:'icon-reload',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>

如下图所示的效果:

在这里插入图片描述

创建出来的布局组件铺满整个页面

属性名	属性值类型	描述	默认值
fit	boolean	如果设置为true，布局组件将自适应父容器。当使用body标签穿件布局的时候，整个页面会自动最大。	false

可以将02-layout.html页面修改成下面这个样子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout（布局）组件</title>
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <!-- 页面的布局 -->
    <div id="cc" class="easyui-layout" data-options="fit:true">
        <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',iconCls:'icon-reload',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>

如下图所示的效果:

在这里插入图片描述

面板属性，最常用的一些，比如region、title以及split这些属性

属性名	属性值类型	描述	默认值
title	string	布局面板标题文本	null
region	string	定义布局面板位置，可用的值有: north,south,east,west,center
border	boolean	为true时显示布局面板边框	true
split	boolean	为true时用户可以通过分割栏改变面板人小	false
iconCls	string	一个包含图标的CSS类ID，该图标将会显示到面板标题上	null
href	string	用于读取远程站点数据的URL链接	null
collapsible	boolean	定义是否显示折叠按钮。(该属性自1.3.3版开始可用)	true
minWidth	number	最小面板宽度(该属性自1.3.3版开始可用)	10
minHeight	number	最小面板高度(该属性自1.3.3版开始可用)	10
maxWidth	number	最大面板宽度该属性自1.3.3版开始可用)	10000
maxHeight	number	最大面板高度该属性自1.3.3版开始可用) s	10000

为了使用这些常用的面板属性，可以将02-layout.html页面修改成下面这个样子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout（布局）组件</title>
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <!-- 页面的布局 -->
    <div id="cc" class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;"></div>
        <div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;"></div>
        <div data-options="region:'center',title:'数据区域'" style="padding:5px;background:#eee;"></div>
    </div>
</body>
</html>