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.});
发表评论