<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
t
jqeasyui学习笔记-panel面板
最新推荐文章于 2021-02-19 14:13:43 发布
这篇博客详细介绍了如何使用jQuery EasyUI库创建一个带有标题、图标、自定义样式和多种功能(如折叠、最小化、最大化、关闭)的Panel面板。内容包括设置面板的高度、宽度、位置,以及添加头部和主体的CSS类,还展示了如何添加自定义工具栏按钮并触发相应事件。
摘要由CSDN通过智能技术生成