jQuery EasyUI 中文API—Layout(Panel)

最新推荐文章于 2025-09-05 13:42:05 发布

原创最新推荐文章于 2025-09-05 13:42:05 发布 · 228 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文详细介绍了如何使用EasyUI中的面板组件，包括其基本特性和如何通过HTML和JavaScript进行配置与操作，同时提供了实例代码帮助开发者快速上手。

面板特性可以在div标签内被定义

HTML代码

<div id="p" class="easyui-panel" title="标题" icon="icon-save" collapsible="true" minimizable="true" maximizable=true closable="true" style="width:500px;height:150px;padding:10px;background:#fafafa;">
内容
</div>

JavaScript代码

名称	类型	描述	默认值
title	string	面板标题	null
iconCls	string	icon图标样式	null
width	number	设置宽度	auto
height	number	设置高度	auto
left	number	设置相对浏览器左边位置	null
top	number	设置相对浏览器上边位置	null
cls	string	添加一个面板的样式	null
headerCls	string	添加一个面板head样式	null
bodyCls	string	添加一个面板body样式	null
style	object	添加一个自定义样式	{}
fit	boolean	面板自适应父容器大小	false
border	boolean	面板边框	true
doSize	boolean	如果设置为真,容器被创建的时候会重新被定义大小和位置	true
collapsible	boolean	定义显示可折叠按钮	false
minimizable	boolean	定义显示最小化按钮	false
maximizable	boolean	定义显示最大化按钮	false
closable	boolean	定义显示关闭按钮	false
tools	array	定制工具,每个工具可以包含两个性质： iconCls 、 handler	[]
collapsed	boolean	定义显示收缩按钮	false
minimized	boolean	初始化最小值	false
maximized	boolean	初始化最大值	false
closed	boolean	恢复到面板初始化状态	false
href	string	远程加载链接到面板	null
loadingMessage	string	加载的时候显示loading信息	Loading…

名称	参数	描述
options	none	返回option
panel	none	返回pane object
header	none	返回panel header object.
body	none	返回 panel body object.
setTitle	title	设置title
open	forceOpen	forceOpen 为true, 面板打开跳过onBeforeOpen
close	forceClose	forceClose为true, 面板关闭跳过 onBeforeClose
destroy	forceDestroy	forceDestroy 为true, 面板销毁跳过 onBeforeDestroy
refresh	none	刷新面板远程加载页面
resize	options	调整面板大小：width、height:、left、top
move	options	移动面板：left、top

标签

#javascript #ViewUI