easyui之layout布局

最新推荐文章于 2025-06-28 16:31:23 发布

原创最新推荐文章于 2025-06-28 16:31:23 发布 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用EasyUI框架实现网页布局，包括不同区域的划分、自适应屏幕的方法及各种属性设置，如标题、边框显示等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layout布局

1、首页我们打开easyui官网和我们的中文api一起结合使用

2、先看下我们需要做出的效果

代码

核心内容

整个大的布局

class="easyui-layout"

自动适应整个屏幕的两种方式

1、body内创建一个div 通过添加属性fit

2:在bady内添加 class样式

里面详细模块区分

通过在data-options里面加入 region（地区）【north：北，south：南，east：东，west：西，center：中】。

属性：

属性名	属性值类型	描述	默认值
title	string	布局面板标题文本。	null
region	string	定义布局面板位置，可用的值有：north, south, east, west, center。
border	boolean	为true时显示布局面板边框。	true
split	boolean	为true时用户可以通过分割栏改变面板大小。	false
fit	boolean	如果设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自动最大	false
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版开始可用）	10000
expandMode	string	在点击折叠面板时候的扩展模式。可用值有：“float”、“dock”和null float：区域面板将展开并浮动在顶部，在鼠标焦点离开面板时会自动隐藏。 dock：区域面板将展开并钉在面板上，在鼠标焦点离开面板时不会自动隐藏。 null：什么也不会发生。（该属性自1.4.4版开始可用）	float
collapsedSize	number	折叠后的面板大小。（该属性自1.4.4版开始可用）	28
hideExpandTool	boolean	为true时隐藏折叠面板上的扩展面板工具。（该属性自1.4.4版开始可用）	false
hideCollapsedContent	boolean	为true时隐藏折叠面板上的标题栏。（该属性自1.4.4版开始可用）	true
collapsedContent	string,function(title)	定义在折叠面板上要显示标题内容。 1. 标题字符串； 2. 通过函数返回标题内容。（该方法自1.4.4版开始可用）代码示例：collapsedContent: function(title){ var region = $(this).panel('options').region; if (region == 'north' \|\| region == 'south'){ return title; } else { return '<div class="mytitle">'+title+'</div>'; } }