jQuery EasyUI API 中文文档 - Panel面板


Posted in Javascript onSeptember 30, 2011

$.fn.panel.defaults重写defaults<?XML:NAMESPACE PREFIX = O />

jQuery EasyUI API 中文文档 - Panel面板
用法示例
创建Panel
1. 经由标记创建Panel
从标记创建Panel更容易。把 'easyui-panel' 类添加到<div/>标记。

<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" 
iconCls="icon-save" closable="true" 
collapsible="true" minimizable="true" maximizable=true> 
<p>panel content.</p> 
<p>panel content.</p> 
</div>

2. 编程创建Panel
让我们创建带右上角工具栏的Panel。.
<div id="p" style="padding:10px;"> 
<p>panel content.</p> 
<p>panel content.</p> 
</div> 
$('#p').panel({ 
width:500, 
height:150, 
title: 'My Panel', 
tools: [{ 
iconCls:'icon-add', 
handler:function(){alert('new')} 
},{ 
iconCls:'icon-save' 
handler:function(){alert('save')} 
}] 
});

移动Panel
调用 'move' 方法把Panel移动到新位置。
$('#p').panel('move',{ 
left:100, 
top:100 
});

加载内容
让我们经由ajax加载panel内容并且当加载成功时显示一些信息。
$('#p').panel({ 
href:'content_url.php', 
onLoad:function(){ 
alert('loaded successfully'); 
} 
});

特性

名称 类型 说明 默认值
title string 显示在Panel头部的标题文字。 null
iconCls string 在Panel里显示一个16x16图标的CSS类。 null
width number 设置Panel的宽度。 auto
height number 设置Panel的高度。 auto
left number 设置Panel的左边位置。 null
top number 设置Panel的顶部位置。 null
cls string 给Panel增加一个CSS类。 null
headerCls string 给Panel头部增加一个CSS类。 null
bodyCls string 给Panel身体增加一个CSS类。 null
style object 给Panel增加自定义格式的样式。 {}
fit boolean 当设为true时,Panel的 尺寸就适应它的父容器。 false
border boolean 定义了是否显示Panel的边框。 true
doSize boolean 设置为true,创建时Panel就调整尺寸并做成布局。 true
noheader boolean 要是设置为true,Panel的头部将不会被创建。 false
content string Panel身体的内容。 null
collapsible boolean 定义了是否显示折叠按钮。 false
minimizable boolean 定义了是否显示最小化按钮。 false
maximizable boolean 定义了是否显示最大化按钮。 false
closable boolean 定义了是否显示关闭按钮。 false
tools array 自定义工具组,每个工具包含两个特性: iconCls和handler []
collapsed boolean 定义了初始化Panel是不是折叠的。 false
minimized boolean 定义了初始化Panel是不是最小化的。 false
maximized boolean 定义了初始化Panel是不是最大化的。 false
closed boolean 定义了初始化Panel是不是关闭的。 false
href string 一个URL,用它加载远程数据并且显示在Panel里。 null
cache boolean 设置为true就缓存从href加载的Panel内容。 true
loadingMessage string 当加载远程数据时在Panel里显示的一条信息。 Loading…
extractor function

定义了如何从ajax响应抽出内容,返回抽出的数据。   extractor: function(data){      var pattern = /

]*>((.|[\n\r])*)/im;      var matches = pattern.exec(data);      if (matches){           return matches[1];      // 只抽出 body 的内容      } else {           return data;      } }  
 

事件

名称 参数 说明
onLoad none 当远程数据被加载时触发。
onBeforeOpen none Panel打开前触发,返回false就停止打开。
onOpen none Panel打开后触发。
onBeforeClose none Panel关闭前触发,返回false就取消关闭。
onClose none Panel关闭后触发。
onBeforeDestroy none Panel销毁前触发,返回false就取消销毁。
onDestroy none Panel销毁后触发。
onBeforeCollapse none Panel折叠前触发,返回false就停止折叠。
onCollapse none Panel折叠后触发。
onBeforeExpand none Panel展开前触发,返回false就停止展开。
onExpand none Panel展开后触发。
onResize width, height Panel调整尺寸后触发。width:新的外部宽度。height:新的外部高度
onMove left,top Panel移动后触发。left:新的左边位置 Top:新的顶部位置
onMaximize none 窗口最大化后触发。
onRestore none 窗口还原为它的原始尺寸后触发。
onMinimize none 窗口最小化后触发。

方法

名称 参数 说明
options none 返回选项特性。
panel none 返回Panel对象。
header none 返回Panel头部对象。
body none 返回Panel身体对象。
setTitle title 设置头部的标题文字。
open forceOpen 当forceOpen参数设为true,就绕过onBeforeOpen回调函数打开Panel。
close forceClose 当forceClose参数设为true,就绕过onBeforeClose回调函数关闭Panel。
destroy forceDestroy 当forceDestroy参数设为true,就绕过onBeforeDestroy回调函数销毁Panel。
refresh href 当设置了href特性时,刷新Panel加载远程数据。
resize options 设置Panel尺寸并做布局。Options对象包含下列特性:width:新的Panel宽度height:新的Panel高度left:新的Panel左边位置top:新的Panel顶部位置
move options 移动Panel到新位置。Options对象包含下列特性:left:新的Panel左边位置top:新的Panel顶部位置
maximize none Panel适应它的容器的尺寸。
minimize none 最小化Panel。
restore none 把最大化的Panel还原为它原来的尺寸和位置。
collapse animate 折叠Panel身体。
expand animate 展开Panel身体。
Javascript 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 #Javascript
Jquery Change与bind事件代码
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 #Javascript
You might like
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
javascript操作css属性
2013/12/30 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python中cPickle用法例子分享
2014/01/03 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
想学画画?python满足你!
2020/12/24 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
工程造价自荐信
2013/10/09 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2015年护士节慰问信
2015/03/23 职场文书