### Portal（门户） [Extension](http://www.jeasyui.com/extension/index.php) ? Portal **扩展下载地址：**[**http://www.jeasyui.com/extension/downloads/jquery-easyui-portal.zip**](http://www.jeasyui.com/extension/downloads/jquery-easyui-portal.zip)** ****(我发布的程序包整也有提供，在extension目录下)**  #### 第1步：创建一个HTML页面 1. **<div** id="pp" style="width:800px;height:500px;"**>**   1.     **<div** style="width:33%"**></div>**   1.     **<div** style="width:33%"**></div>**   1.     **<div** style="width:33%"**></div>**   1. **</div>**   <div id="pp" style="width:800px;height:500px;"> <div style="width:33%"></div> <div style="width:33%"></div> <div style="width:33%"></div> </div> #### 第2步：创建一个门户 1. $('#pp').portal(options);   $('#pp').portal(options); #### 第3步：在这个门户中添加面板部件 1. // create the panel    1. var p = $('<div></div>').appendTo('body');    1. p.panel({    1.     title: 'My Title',    1.     height:150,    1.     closable: true,    1.     collapsible: true   1. });    1.      1. // add the panel to portal    1. $('#pp').portal('add', {    1.     panel: p,    1.     columnIndex: 0    1. });   // create the panel var p = $('<div></div>').appendTo('body'); p.panel({ title: 'My Title', height:150, closable: true, collapsible: true }); // add the panel to portal $('#pp').portal('add', { panel: p, columnIndex: 0 }); ####   #### 属性 | **属性名** | **属性值类型** | **描述** | **默认值** | |-----|-----|-----|-----| | width | number | 门户宽度。 | auto | | height | number | 门户高度。 | auto | | border | boolean | 定义是否显示门户边框。 | false | | fit | boolean | 当该属性为true时则设置门户大小自适应父容器。 | false | ####   #### 事件 | **事件名** | **参数** | **描述** | |-----|-----|-----| | onStateChange | none | 在用户拖拽面板的时候触发。 | | onResize | width,height | 在门户大小改变的时候触发。 | ####   #### 方法 <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>resize</td> <td>param</td> <td>设置门户大小，'param'参数包含以下属性：<br/>width：新的门户宽度。<br/>height：新的门户高度。</td></tr><tr><td>getPanels</td> <td>columnIndex</td> <td>获取指定列面板，当列索引参数未指定的时候则返回所有面板。</td></tr><tr><td>add</td> <td>param</td> <td>添加一个新面板，'param'参数包含以下属性：<br/>panel：添加的面板对象。<br/>columnIndex：插入的列索引。 </td></tr><tr><td>remove</td> <td>panel</td> <td>移除和销毁指定面板。</td></tr><tr><td>disableDragging</td> <td>panel</td> <td>禁用面板拖拽功能。</td></tr><tr><td>enableDragging</td> <td>panel</td> <td>启用面板拖拽功能。</td></tr></tbody></table>