jqeasyui学习笔记-panel面板

最新推荐文章于 2021-03-12 03:07:44 发布

golangerblog

最新推荐文章于 2021-03-12 03:07:44 发布

阅读量841

点赞数

分类专栏： jqueryeasyui 文章标签： easyui

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

版权

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

摘要由CSDN通过智能技术生成

<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

最低0.47元/天解锁文章

golangerblog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqeasyui学习笔记-panel面板

The panel content$(function(){$('#p').panel({//面板分为头部和主体两部分title:'面板',//面板标题名字iconCls:'icon-ok',//标题名字配图图标height:300,//面板高width:300,//面板宽id:'demopanel',//面板body节点增加ID属性值left:'200
复制链接

扫一扫

专栏目录