jQuery EasyUI API 中文文档 - Panel面板

╰+哭是因爲堅強的太久メ 2022-03-19 06:23 440阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

用$.fn.panel.defaults重写defaults。![20110930012631857.png][] 
用法示例  
创建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>  
panel content.  
panel content.  
</div>

2. 编程创建Panel   
让我们创建带右上角工具栏的Panel。.

复制代码代码如下:

<div id="p" style="padding:10px;">  
panel content.  
panel content.  
</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');   
\}   
\});

特性

<table> 
 <tbody> 
 <tr> 
 <td> 名称 </td> 
 <td> 类型 </td> 
 <td> 说明 </td> 
 <td> 默认值 </td> 
 </tr> 
 <tr> 
 <td> title </td> 
 <td> string </td> 
 <td> 显示在Panel头部的标题文字。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> iconCls </td> 
 <td> string </td> 
 <td> 在Panel里显示一个16x16图标的CSS类。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> width </td> 
 <td> number </td> 
 <td> 设置Panel的宽度。 </td> 
 <td> auto </td> 
 </tr> 
 <tr> 
 <td> height </td> 
 <td> number </td> 
 <td> 设置Panel的高度。 </td> 
 <td> auto </td> 
 </tr> 
 <tr> 
 <td> left </td> 
 <td> number </td> 
 <td> 设置Panel的左边位置。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> top </td> 
 <td> number </td> 
 <td> 设置Panel的顶部位置。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> cls </td> 
 <td> string </td> 
 <td> 给Panel增加一个CSS类。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> headerCls </td> 
 <td> string </td> 
 <td> 给Panel头部增加一个CSS类。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> bodyCls </td> 
 <td> string </td> 
 <td> 给Panel身体增加一个CSS类。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> style </td> 
 <td> object </td> 
 <td> 给Panel增加自定义格式的样式。 </td> 
 <td> {} </td> 
 </tr> 
 <tr> 
 <td> fit </td> 
 <td> boolean </td> 
 <td> 当设为true时，Panel的&nbsp;尺寸就适应它的父容器。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> border </td> 
 <td> boolean </td> 
 <td> 定义了是否显示Panel的边框。 </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> doSize </td> 
 <td> boolean </td> 
 <td> 设置为true，创建时Panel就调整尺寸并做成布局。 </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> noheader </td> 
 <td> boolean </td> 
 <td> 要是设置为true，Panel的头部将不会被创建。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> content </td> 
 <td> string </td> 
 <td> Panel身体的内容。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> collapsible </td> 
 <td> boolean </td> 
 <td> 定义了是否显示折叠按钮。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> minimizable </td> 
 <td> boolean </td> 
 <td> 定义了是否显示最小化按钮。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> maximizable </td> 
 <td> boolean </td> 
 <td> 定义了是否显示最大化按钮。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> closable </td> 
 <td> boolean </td> 
 <td> 定义了是否显示关闭按钮。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> tools </td> 
 <td> array </td> 
 <td> 自定义工具组，每个工具包含两个特性： iconCls和handler </td> 
 <td> [] </td> 
 </tr> 
 <tr> 
 <td> collapsed </td> 
 <td> boolean </td> 
 <td> 定义了初始化Panel是不是折叠的。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> minimized </td> 
 <td> boolean </td> 
 <td> 定义了初始化Panel是不是最小化的。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> maximized </td> 
 <td> boolean </td> 
 <td> 定义了初始化Panel是不是最大化的。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> closed </td> 
 <td> boolean </td> 
 <td> 定义了初始化Panel是不是关闭的。 </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> href </td> 
 <td> string </td> 
 <td> 一个URL，用它加载远程数据并且显示在Panel里。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> cache </td> 
 <td> boolean </td> 
 <td> 设置为true就缓存从href加载的Panel内容。 </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> loadingMessage </td> 
 <td> string </td> 
 <td> 当加载远程数据时在Panel里显示的一条信息。 </td> 
 <td> Loading… </td> 
 </tr> 
 <tr> 
 <td> extractor </td> 
 <td> function </td> 
 <td> 定义了如何从ajax响应抽出内容，返回抽出的数据。 &nbsp; <pre><code>extractor: function(data){
 </code></pre> <pre><code>&nbsp;&nbsp;&nbsp;&nbsp; var pattern = /&lt;body[^&gt;]*&gt;((.|[\n\r])*)&lt;\/body&gt;/im;</code></pre> <pre><code>&nbsp;&nbsp;&nbsp;&nbsp; var matches = pattern.exec(data);</code></pre> <pre><code>&nbsp;&nbsp;&nbsp;&nbsp; if (matches){
 </code></pre> <pre><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return matches[1];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 只抽出 body 的内容</code></pre> <pre><code>&nbsp;&nbsp;&nbsp;&nbsp; } else {
 </code></pre> <pre><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return data;</code></pre> <pre><code>&nbsp;&nbsp;&nbsp;&nbsp; }</code></pre> <pre><code>}</code></pre> <pre>
<code>&nbsp;</code></pre> </td> 
 <td> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

事件

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

方法

<table> 
 <tbody> 
 <tr> 
 <td> 名称 </td> 
 <td> 参数 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> options </td> 
 <td> none </td> 
 <td> 返回选项特性。 </td> 
 </tr> 
 <tr> 
 <td> panel </td> 
 <td> none </td> 
 <td> 返回Panel对象。 </td> 
 </tr> 
 <tr> 
 <td> header </td> 
 <td> none </td> 
 <td> 返回Panel头部对象。 </td> 
 </tr> 
 <tr> 
 <td> body </td> 
 <td> none </td> 
 <td> 返回Panel身体对象。 </td> 
 </tr> 
 <tr> 
 <td> setTitle </td> 
 <td> title </td> 
 <td> 设置头部的标题文字。 </td> 
 </tr> 
 <tr> 
 <td> open </td> 
 <td> forceOpen </td> 
 <td> 当forceOpen参数设为true，就绕过onBeforeOpen回调函数打开Panel。 </td> 
 </tr> 
 <tr> 
 <td> close </td> 
 <td> forceClose </td> 
 <td> 当forceClose参数设为true，就绕过onBeforeClose回调函数关闭Panel。 </td> 
 </tr> 
 <tr> 
 <td> destroy </td> 
 <td> forceDestroy </td> 
 <td> 当forceDestroy参数设为true，就绕过onBeforeDestroy回调函数销毁Panel。 </td> 
 </tr> 
 <tr> 
 <td> refresh </td> 
 <td> href </td> 
 <td> 当设置了href特性时，刷新Panel加载远程数据。 </td> 
 </tr> 
 <tr> 
 <td> resize </td> 
 <td> options </td> 
 <td> 设置Panel尺寸并做布局。Options对象包含下列特性： width：新的Panel宽度 height：新的Panel高度 left：新的Panel左边位置 top：新的Panel顶部位置 </td> 
 </tr> 
 <tr> 
 <td> move </td> 
 <td> options </td> 
 <td> 移动Panel到新位置。Options对象包含下列特性： left：新的Panel左边位置 top：新的Panel顶部位置 </td> 
 </tr> 
 <tr> 
 <td> maximize </td> 
 <td> none </td> 
 <td> Panel适应它的容器的尺寸。 </td> 
 </tr> 
 <tr> 
 <td> minimize </td> 
 <td> none </td> 
 <td> 最小化Panel。 </td> 
 </tr> 
 <tr> 
 <td> restore </td> 
 <td> none </td> 
 <td> 把最大化的Panel还原为它原来的尺寸和位置。 </td> 
 </tr> 
 <tr> 
 <td> collapse </td> 
 <td> animate </td> 
 <td> 折叠Panel身体。 </td> 
 </tr> 
 <tr> 
 <td> expand </td> 
 <td> animate </td> 
 <td> 展开Panel身体。 </td> 
 </tr> 
 </tbody> 
</table>

[20110930012631857.png]: http://files.jb51.net/upload/201109/20110930012631857.png