jquery 前端框架 easyUI-1.1.2_Layout(Panel)

EasyUI面板组件详解

最新推荐文章于 2021-06-25 17:08:09 发布

原创最新推荐文章于 2021-06-25 17:08:09 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #layout #框架 #function #javascript #浏览器

本文详细介绍了EasyUI框架中面板组件的使用方法，包括HTML和JavaScript的配置方式、各种属性说明如可折叠、最小化等特性，以及提供的事件和方法。

Panel 【面板】

面板特性可以在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代码

//创建一个面板   
$('#p').panel(options);   
  
//创建一个定义好的面板   
$('#p').panel({   
  title: 'My Panel',   
  tools: [{   
    iconCls:'icon-new',   
    handler:function(){alert('new')}   
  },{   
    iconCls:'icon-save'  
    handler:function(){alert('save')}   
  }]   
});   
  
//定位   
$('#p').panel('move',{   
  left:100,   
  top:100   
});

特性说明

Properties

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

事件说明

名称	参数	描述
onLoad	none	远程数据加载完毕
onBeforeOpen	none	面板打开之前
onOpen	none	面板打开之后
onBeforeClose	none	面板关闭之前
onClose	none	面板关闭之后
onBeforeDestroy	none	面板销毁之前
onDestroy	none	面板销毁之后
onBeforeCollpase	none	面板收缩之前
onCollapse	none	面板收缩之后
onBeforeExpand	none	面板展开之前
onExpand	none	面板展开之后
onResize	width, height	改变面板宽度、高度
onMove	left,top	面板移动的位置left，top
onMaximize	none	面板最大化之后
onRestore	none	面板恢复原始大小之后
onMinimize	none	面板最小化之后

方法说明

名称	参数	描述
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