1. 使用标签创建控制面板
使用标签创建控制面板十分简单,只须要对<div>标签引用'easyui-panel'类。
1.<div id="p" class="easyui-panel" title="My Panel"
2. style="width:500px;height:150px;padding:10px;background:#fafafa;"
3. data-options="iconCls:'icon-save',closable:true,
4. collapsible:true,minimizable:true,maximizable:true">
5. <p>panel content.</p>
6. <p>panel content.</p>
7.</div>
2. 使用脚本创建控制面板
下面的代码将创建一个工具栏在右上方的控制面板。
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.});
移动控制面板
调用'move'方法可以将控制面板移动到一个新的位置。
1.$('#p').panel('move',{
2. left:100,
3. top:100
4.});
载入内容
下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。
1.$('#p').panel({
2. href:'content_url.php',
3. onLoad:function(){
4. alert('loaded successfully');
5. }
6.});