jqeasyui学习笔记-panel面板_$("#").panel(-CSDN博客

本文链接：https://blog.csdn.net/golangerblog/article/details/42297529

这篇博客详细介绍了如何使用jQuery EasyUI库创建一个带有标题、图标、自定义样式和多种功能（如折叠、最小化、最大化、关闭）的Panel面板。内容包括设置面板的高度、宽度、位置，以及添加头部和主体的CSS类，还展示了如何添加自定义工具栏按钮并触发相应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
<div id="p">The panel content</div>
</body>
<script>
$(function(){
$('#p').panel({
//面板分为头部和主体两部分
title:'面板',//面板标题名字
iconCls:'icon-ok',//标题名字配图图标
height:300,//面板高
width:300,//面板宽
id:'demopanel',//面板body节点增加ID属性值
left:'200px',//左边位置
top:'200px',//上边位置
content:'panel demo new content',//接管面板内容
cls:'demo_panel',//面板增加一个CSS class
headerCls:'h_panel',//面板头部增加一个CSS class
bodyCls:'b_panel',//面板主体增加一个CSS class
style:{'color':'red','background':'black','fontSize':18},//自定义样式
fit:false,//是否适应父级节点大小，默认false
border:true,//面板边框是否显示，默认true
doSize:true,//创建面板是否执行面板尺寸，默认true
noheader:false,//不创建头部，默认false
collapsible:true,//是否显示折叠按钮，默认false
minimizable:true,//是否显示最小化按钮，默认false
maximizable:true,//是否显示最大化按钮，默认false
closable:true,//是否显示关闭按钮，默认false
tools:[//面板右上角增加一个或多个工具{}为界，每个工具两个属性，iconCls图标和handler处理事件
{ 
iconCls:'icon-add',
handler:function(){
alert('add')
}
},
{
iconCls:'icon-edit',
handler:function(){
alert('edit')
},
}
],
collapsed:false,//面板初始化时是否折叠，默认false
minimized:false,//面板初始化时是否最小化，默认false
maximized:false,//面板初始化时是否最大化，默认false
closed:false,//面板初始化时是否关闭，默认false
href:'http://www.baidu.com',//面板主体中远程加载路径页面的内容
});
});
</script>