jQuery EasyUI API 中文文档 - 面板（Panel）

Panel 面板

用$.fn.panel.defaults重写defaults。

用法示例

创建Panel

1. 经由标记创建Panel

从标记创建Panel更容易。把 'easyui-panel' 类添加到<div/>标记。

1. <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"

2. iconCls="icon-save" closable="true"

3. collapsible="true" minimizable="true" maximizable=true>

4. <p>panel content.</p>

5. <p>panel content.</p>

6. </div>

2. 编程创建Panel

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

1. <div id="p" style="padding:10px;">  

2.     <p>panel content.</p>  

3.     <p>panel content.</p>  

4. </div>  

5.

6. $('#p').panel({  

7.   width:500,  

8.   height:150,  

9.   title: 'My Panel',  

10.   tools: [{  

11.     iconCls:'icon-add',  

12.     handler:function(){alert('new')}  

13.   },{  

14.     iconCls:'icon-save'

15.     handler:function(){alert('save')}  

16.   }]  

17. });  

移动Panel

调用 'move' 方法把Panel移动到新位置。

1. $('#p').panel('move',{  

2.   left:100,  

3.   top:100  

4. });  

加载内容

让我们经由ajax加载panel内容并且当加载成功时显示一些信息。

1. $('#p').panel({  

2.     href:'content_url.php',  

3.     onLoad:function(){  

4.         alert('loaded successfully');  

5.     }  

6. }); 

特性

extractor: function(data){

 var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;

 var matches = pattern.exec(data);

 if (matches){

 return matches[1]; // 只抽出 body 的内容

 } else {

 return data;

 }

}

事件

方法