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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
ext form 表单提交数据的方法小结
Aug 08 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 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中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
python 获取et和excel的版本号
2009/04/09 Python
Python中的作用域规则详解
2015/01/30 Python
Python中list初始化方法示例
2016/09/18 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python实现图片识别汽车功能
2018/11/30 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python的pygame安装教程详解
2020/02/10 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
学习心得体会
2014/01/01 职场文书
十八大演讲稿
2014/05/22 职场文书
安全生产标语
2014/06/06 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android