panel(面板) · easyUI

### Panel（面板）使用$.fn.panel.defaults重写默认值对象。面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。 ![](https://box.kancloud.cn/2016-07-19_578d9134b779d.png) #### #### 使用案例 ##### 创建面板 1. 通过标签创建面板通过标签创建更简单。添加'easyui-panel'类ID到<div/>标签。 1. **<div** id="p" class="easyui-panel" title="My Panel" 1. style="width:500px;height:150px;padding:10px;background:#fafafa;" 1. data-options="iconCls:'icon-save',closable:true, 1. collapsible:true,minimizable:true,maximizable:true"**>** 1. **<p>**panel content.**</p>** 1. **<p>**panel content.**</p>** 1. **</div>** <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div> 2. 创建面板程序让我们创建面板右上角的的工具栏。 1. <div id="p" style="padding:10px;"> 1. <p>panel content.</p> 1. <p>panel content.</p> 1. </div> 1. 1. $('#p').panel({ 1. width:500, 1. height:150, 1. title: 'My Panel', 1. tools: [{ 1. iconCls:'icon-add', 1. handler:function(){alert('new')} 1. },{ 1. iconCls:'icon-save', 1. handler:function(){alert('save')} 1. }] 1. }); <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')} }] }); ##### 移动面板调用'move'方法移动面板到新的位置。 1. $('#p').panel('move',{ 1. left:100, 1. top:100 1. }); $('#p').panel('move',{ left:100, top:100 }); ##### 读取内容当加载成功的时候让我们通过ajax加载面板内容并显示一些消息。 1. $('#p').panel({ 1. href:'content_url.php', 1. onLoad:function(){ 1. alert('loaded successfully'); 1. } 1. }); $('#p').panel({ href:'content_url.php', onLoad:function(){ alert('loaded successfully'); } }); #### 属性 <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>id</td> <td>string</td> <td>面板的ID属性。</td> <td>null</td></tr><tr><td>title</td> <td>string</td> <td>在面板头部显示的标题文本。</td> <td>null</td></tr><tr><td>iconCls</td> <td>string</td> <td>设置一个16x16图标的CSS类ID显示在面板左上角。</td> <td>null</td></tr><tr><td>width</td> <td>number</td> <td>设置面板宽度。</td> <td>auto</td></tr><tr><td>height</td> <td>number</td> <td>设置面板高度。</td> <td>auto</td></tr><tr><td>left</td> <td>number</td> <td>设置面板距离左边的位置（即X轴位置）。</td> <td>null</td></tr><tr><td>top</td> <td>number</td> <td>设置面板距离顶部的位置（即Y轴位置）。</td> <td>null</td></tr><tr><td>cls</td> <td>string</td> <td>添加一个CSS类ID到面板。</td> <td>null</td></tr><tr><td>headerCls</td> <td>string</td> <td>添加一个CSS类ID到面板头部。</td> <td>null</td></tr><tr><td>bodyCls</td> <td>string</td> <td>添加一个CSS类ID到面板正文部分。</td> <td>null</td></tr><tr><td>style</td> <td>object</td> <td>添加一个当前指定样式到面板。 <p>如下代码示例更改面板边框宽度：</p><pre style="COLOR: #006600"><div class="easyui-panel" style="width:200px;height:100px" data-options="style:{borderWidth:2}"> </div></pre></td> <td>{}</td></tr><tr><td>fit</td> <td>boolean</td> <td>当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板，可以自动在父容器的最大范围内调整大小。 <pre style="COLOR: #006600"><div style="width:200px;height:100px;padding:5px"> <div class="easyui-panel" style="width:200px;height:100px" data-options="fit:true,border:false"> Embedded Panel </div> </div> </pre></td> <td>false</td></tr><tr><td>border</td> <td>boolean</td> <td>定义是否显示面板边框。</td> <td>true</td></tr><tr><td>doSize</td> <td>boolean</td> <td>如果设置为true，在面板被创建的时候将重置大小和重新布局。</td> <td>true</td></tr><tr><td>noheader</td> <td>boolean</td> <td>如果设置为true，那么<span style="FONT-SIZE: 9pt; FONT-FAMILY: '宋体'; BACKGROUND-COLOR: black"><span style="BACKGROUND-COLOR: window">将不会创建面板标题。</span></span></td> <td>false</td></tr><tr><td>content</td> <td>string</td> <td>面板主体内容。</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,selector</td> <td>自定义工具菜单，可用值：<br/>1) 数组，每个元素都包含'iconCls'和'handler'属性。<br/>2) 指向工具菜单的选择器。<br/><p>面板工具菜单可以声明在已经存在的<div>标签上：</p><pre><div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"> </div> <div id="tt"> <a href="#" class="icon-add" onclick="javascript:alert('add')"></a> <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a> </div> </pre> <p>面板工具菜单也可以通过数组定义：</p><pre><div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:[ { iconCls:'icon-add', handler:function(){alert('add')} },{ iconCls:'icon-edit', handler:function(){alert('edit')} }]"> </div> </pre></td> <td>[]</td></tr><tr><td>collapsed</td> <td>boolean</td> <td>定义是否在初始化的时候折叠面板。</td> <td>false</td></tr><tr><td>minimized</td> <td>boolean</td> <td>定义是否在初始化的时候最小化面板。</td> <td>false</td></tr><tr><td>maximized</td> <td>boolean</td> <td>定义是否在初始化的时候最大化面板。</td> <td>false</td></tr><tr><td>closed</td> <td>boolean</td> <td>定义是否在初始化的时候关闭面板。</td> <td>false</td></tr><tr><td>href</td> <td>string</td> <td>从URL读取远程数据并且显示到面板。注意：<span closure_uid_262891198="189">内容</span><span closure_uid_262891198="190">将不会被载入</span><span closure_uid_262891198="191">，直到面板</span><span closure_uid_262891198="192">打开或</span><span closure_uid_262891198="193">扩大，在<span closure_uid_262891198="199">创建</span><span closure_uid_262891198="200">延迟加载</span><span closure_uid_262891198="201">面板时</span></span><span closure_uid_262891198="195">是</span><span closure_uid_262891198="196">非常</span><span closure_uid_262891198="197">有用</span><span closure_uid_262891198="198">的</span><span closure_uid_262891198="202">：</span> <pre><div id="pp" class="easyui-panel" style="width:300px;height:200px" data-options="href='get_content.php',closed:true"> </div> <a href="#" onclick="javascript:$('#pp').panel('open')">Open</a> </pre></td> <td>null</td></tr><tr><td>cache</td> <td>boolean</td> <td>如果为true，在超链接载入时缓存面板内容。</td> <td>true</td></tr><tr><td>loadingMessage</td> <td>string</td> <td>在加载远程数据的时候在面板内显示一条消息。</td> <td>Loading…</td></tr><tr><td>extractor</td> <td>function</td> <td>定义如何从ajax应答数据中提取内容，返回提取数据。<pre>extractor: function(data){ var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var matches = pattern.exec(data); if (matches){ return matches[1]; // 仅提取主体内容 } else { return data; } } </pre></td> <td/></tr><tr><td>method</td> <td>string</td> <td>使用HTTP的哪一种方法读取内容页。可用值：'get','post'。<strong><font color="#ff0000">（该属性自1.3.6版开始可用）</font></strong></td> <td>get</td></tr><tr><td>queryParams</td> <td>object</td> <td>在加载内容页的时候添加的请求参数。<strong><font color="#ff0000">（该属性自1.3.6版开始可用）</font></strong></td> <td>{}</td></tr><tr><td>loader</td> <td>function</td> <td> <p>定义了如何从远程服务器加载内容页，该函数接受以下参数：<br/>param：参数对象发送给远程服务器。<br/>success(data)：在检索数据成功的时候调用的回调函数。<br/>error()：在检索数据失败的时候调用的回调函数。<br/><strong><font color="#ff0000">（该属性自1.3.6版开始可用）</font></strong></p></td> <td/></tr></tbody></table> #### #### 事件 <table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>事件参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onBeforeLoad</td> <td>none</td> <td>在加载内容页之前触发，返回false将忽略该动作。<strong><font color="#ff0000">（该事件自1.3.6版开始可用）</font></strong></td></tr><tr><td>onLoad</td> <td>none</td> <td>在加载远程数据时触发。</td></tr><tr><td>onLoadError</td> <td>none</td> <td>在加载内容页发生错误时触发。<strong><font color="#ff0000">（该事件自1.3.6版开始可用）</font></strong></td></tr><tr><td>onBeforeOpen</td> <td>none</td> <td>在打开面板之前触发，返回false可以取消打开操作。</td></tr><tr><td>onOpen</td> <td>none</td> <td>在打开面板之后触发。</td></tr><tr><td>onBeforeClose</td> <td>none</td> <td>在关闭面板之前触发，返回false可以取消关闭操作。下列的面板将不能关闭。<pre><div class="easyui-panel" style="width:300px;height:200px;" title="My Panel" data-options="onBeforeClose:function(){return false}"> 面板将不能关闭 </div> </pre></td></tr><tr><td>onClose</td> <td>none</td> <td>在面板关闭之后触发。</td></tr><tr><td>onBeforeDestroy</td> <td>none</td> <td>在面板销毁之前触发，返回false可以取消销毁操作。</td></tr><tr><td>onDestroy</td> <td>none</td> <td>在面板销毁之后触发。</td></tr><tr><td>onBeforeCollapse</td> <td>none</td> <td>在面板折叠之前触发，返回false可以终止折叠操作。</td></tr><tr><td>onCollapse</td> <td>none</td> <td>在面板折叠之后触发。</td></tr><tr><td>onBeforeExpand</td> <td>none</td> <td>在面板展开之前触发，返回false可以终止展开操作。</td></tr><tr><td>onExpand</td> <td>none</td> <td>在面板展开之后触发。</td></tr><tr><td>onResize</td> <td>width, height</td> <td>在面板改变大小之后触发。<br/>width：新的宽度。<br/>height：新的高度。</td></tr><tr><td>onMove</td> <td>left,top</td> <td>在面板移动之后触发。<br/>left：新的左边距位置。<br/>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 class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>panel</td> <td>none</td> <td>返回面板对象。</td></tr><tr><td>header</td> <td>none</td> <td>返回面板头对象。</td></tr><tr><td>body</td> <td>none</td> <td>返回面板主体对象。</td></tr><tr><td>setTitle</td> <td>title</td> <td>设置面板头的标题文本。</td></tr><tr><td>open</td> <td>forceOpen</td> <td>在'forceOpen'参数设置为true的时候，打开面板时将跳过'onBeforeOpen'回调函数。</td></tr><tr><td>close</td> <td>forceClose</td> <td>在'forceClose'参数设置为true的时候，关闭面板时将跳过'onBeforeClose'回调函数。</td></tr><tr><td>destroy</td> <td>forceDestroy</td> <td>在'forceDestroy'参数设置为true的时候，销毁面板时将跳过'onBeforeDestory'回调函数。</td></tr><tr><td>clear</td> <td>none</td> <td>清除面板内容。<strong><font color="#ff0000">（该方法自1.4版开始可用）</font></strong></td></tr><tr><td>refresh</td> <td>href</td> <td>刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性。 <p>代码示例：</p><pre>// 打开面板且刷新其内容。 $('#pp').panel('open').panel('refresh'); // 刷新一个新的URL内容$('#pp').panel('open').panel('refresh','new_content.php'); </pre></td></tr><tr><td>resize</td> <td>options</td> <td>设置面板大小和布局。参数对象包含下列属性：<br/>width：新的面板宽度。<br/>height：新的面板高度。<br/>left：新的面板左边距位置。<br/>top：新的面板上边距位置。 <p>代码示例：</p><pre>$('#pp').panel('resize',{ width: 600, height: 400 }); </pre></td></tr><tr><td>doLayout</td> <td>none</td> <td>设置面板内子组件的大小。<strong><font color="#ff0000">（该方法自1.4版开始可用）</font></strong></td></tr><tr><td>move</td> <td>options</td> <td>移动面板到一个新位置。参数对象包含下列属性：<br/>left：新的左边距位置。<br/>top：新的上边距位置。</td></tr><tr><td>maximize</td> <td>none</td> <td>最大化面板到容器大小。</td></tr><tr><td>minimize</td> <td>none</td> <td>最小化面板。</td></tr><tr><td>restore</td> <td>none</td> <td> <div>恢复最大化面板回到原来的大小和位置。</div></td></tr><tr><td>collapse</td> <td>animate</td> <td>折叠面板主题。</td></tr><tr><td>expand</td> <td>animate</td> <td>展开面板主体。</td></tr></tbody></table>