-
:转载时请以超链接形式标明文章原始出处和作者信息及
这篇文章介绍一下面板(Panel)用法以及参数,首先我们可以先看一下面板功能可以做什么,下图就是一个面板的实例。
同样我们来通过一个小例子来学习一下这些参数,HTML代码如下:
然后按照《jQuery EasyUI框架使用文档》包含必要文件后,只要在$(function(){ }); 里添加一行代码来生成面板:
也可以给面板函数添加一些参数:- $('#p').panel({
- title: 'My Panel',
- tools: [{
- iconCls:'icon-new',
- handler:function(){alert('new')}
- },{
- iconCls:'icon-save'
- handler:function(){alert('save')}
- }]
- });
也可以把面板移动到其他位置:
上面只是一些例子,下面我们来看一下具体的属性和事件方法:
名字 类型 描述 默认值 title 字符串 在面板头部显示的标题文本 null iconCls 字符串 一个CSS类来显示在面板中的16x16图标 null width 数字 设置面板的宽度 auto height 数字 设置面板的高度 auto left 数字 设置面板左侧位置 null top 数字 设置面板的顶部位置 null cls 字符串 给面板添加一个CSS类 null headerCls 字符串 给面板头部添加一个CSS类 null bodyCls 字符串 给面板主体添加一个CSS类 null style 对象 给面板自定义样式 {} fit 布尔 当设置为true,面板尺寸将适合它的父容器。 false border 布尔 定义面板的边框 true doSize 布尔 当设置为true,面板载创建的时候将被调整和重新布局 true collapsible 布尔 定义是否显示可折叠定义按钮 false minimizable 布尔 定义是否显示最小化按钮 false maximizable 布尔 定义是否显示{zd0}化按钮 false closable 布尔 定义是否显示关闭按钮 false tools 数组 自定义工具,每个工具可以包含两个属性:iconCls and handler [] collapsed 布尔 定义在初始化的时候折叠面板 false minimized 布尔 定义在初始化的时候最小化面板 false maximized 布尔 定义在初始化的时候{zd0}化面板 false closed 布尔 定义在初始化的时候关闭面板 false href 字符串 一个远程的URL加载数据,然后显示在面板中 null loadingMessage 字符串 当加载远程数据时,在面板中显示的信息 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 当面板调整大小之后触发
width: 新的宽度
height: 新的高度onMove left,top 当面板移动之后触发
left: 新的左侧位置
top: 新的顶部位置onMaximize none 当窗口{zd0}化的时候被触发 onRestore none 当窗口恢复到原来的大小时被触发 onMinimize none 当窗口最小化的时候被触发 名字 参数 描述 options none 返回设置的属性值 panel none 返回面板对象 header none 返回面板头部对象 body none 返回面板主体对象 setTitle title 设置面板头部标题 open forceOpen 当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数 close forceClose 当forceClose设置为true,面板被关闭的时候忽略onBeforeClose 回调函数 destroy forceDestroy 当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数 refresh none 当设置了href值时,刷新面板来加载远程数据 resize options 设置面板的大小和布局,这些选项包含以下的属性:
width: 新面板的宽度
height: 新面板的高度
left: 新面板的左侧位置
top: 新面板的顶部位置move options 移动面板到一个新的位置,这些选项包含以下属性:
left: 新面板的左侧位置
top: 新面板的顶部位置