2、EasyUI的panel面板组件

柔情只为你懂 2022-06-03 10:58 318阅读 0赞

### 1、**panel是其他组件的容器。** ###

**data-options:是数据配置选项**  
**tools表示配置图标和绑定的事件函数**里面可以直接写匿名函数也可以写函数名

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th align="center">属性值类型</th> 
   <th align="right">描述</th> 
   <th align="right">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td align="center">string</td> 
   <td align="right">在面板头部显示的标题文本。</td> 
   <td align="right">null</td> 
  </tr> 
  <tr> 
   <td>iconCls</td> 
   <td align="center">string</td> 
   <td align="right">设置一个16x16图标的CSS类ID显示在面板左上角。</td> 
   <td align="right">null</td> 
  </tr> 
 </tbody> 
</table>

<script type="text/javascript"> /* 图标icon-edit点击触发的事件 */ function funEdit(){ alert('edit'); } </script>
    <body>
       <div id="p1" class="easyui-panel" data-options="title:'这里是panel面板头部显示的标题文本',width:400,iconCls:'icon-save', tools:[{iconCls:'icon-save',handler:function(){alert('save')}},{iconCls:'icon-edit',handler:funEdit}]">
            <div>Hello World</div>
            <div>EasyUI 组件</div>
            <div>easyui-panel是其他组件的容器</div>
       </div>
    </body>

如图所示：  
![EasyUI的panel面板][EasyUI_panel]

### 2、添加panel面板关闭、打开按钮和事件 ###

<script type="text/javascript"> /* 打开panel面板 */ function closePanel(){ $("#p1").panel('close'); } /* 关闭panel面板 */ function openPanel(){ $("#p1").panel('open'); } </script>
    
    <input type="button" value="关闭" onclick="closePanel()"> 
    <input type="button" value="打开" onclick="openPanel()">

### 3、添加折叠与展开panel面板按钮事件 ###

<script type="text/javascript"> /* 折叠panel面板 */ function collapsePanel(){ $("#p1").panel('collapse'); } /* 展开panel面板 */ function expandPanel(){ $("#p1").panel('expand'); } </script>
    
    <input type="button" value="折叠panel面板" onclick="collapsePanel()">
    <input type="button" value="展开叠panel面板" onclick="expandPanel()">

### 4、添加最大化与最小化panel面板按钮事件 ###

<script type="text/javascript"> /* 最大化panel面板 */ function maxPanel(){ $("#p1").panel('maximize'); } /* 最小化panel面板 */ function minPanel(){ $("#p1").panel('minimize'); } </script>
    
    <input type="button" value="最大化panel面板" onclick="maxPanel()"> 
    <input type="button" value="最小化panel面板" onclick="minPanel()">

![SouthEast][]

### 5、通过属性来控制最大化最小化 ###

<div id="p2" class="easyui-panel" data-options="title:'第二个panel面板',collapsible:true,minimizable:true,maximizable:true,closable:true">
          <div>Hello World</div>
          <div>EasyUI 组件</div>
          <div>easyui-panel是其他组件的容器</div>
    </div>

![SouthEast 1][]

### 6、panel加载内容的面板 ###

<script type="text/javascript"> function getDatas(){ $("#data").panel('refresh','randomMsg.do'); } </script>
    </head>
    <body>
        <div id="data" title="加载内容的面板" class="easyui-panel" style="width: 400px;height: 300px" data-options="tools:[{iconCls:'icon-reload',handler:getDatas}]">
    
        </div>
    </body>

![panel加载内容的面板][panel]

### 7、panel面板布局 ###

<h1> 东西 南北中 布局  </h1>
        <div class="easyui-panel" style="width: 500px;height: 400px;" >
             <div class="easyui-layout" data-options="fit:true">
                   <div data-options="region:'west',split:true" style="width: 200px">左边</div>
                   <div data-options="region:'center'" >中间</div>
                   <div data-options="region:'east',split:true" style="width: 100px">右边</div>
             </div>
        </div>

![SouthEast 2][]

[EasyUI_panel]: /images/20220603/0031c74463984bc08243635543e7d3e2.png
[SouthEast]: /images/20220603/694e126ba08648158a73c3161afd0af1.png
[SouthEast 1]: /images/20220603/2eac29086f6247ce899eae8030607ada.png
[panel]: /images/20220603/d9effdf59f6e4c87a6b95107f42bfade.png
[SouthEast 2]: /images/20220603/a924cc72933f4fadb4860b5f67677f90.png

发表评论取消回复

表情：

评论列表（有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读

相关 EasyUI - panel 高度自适应

EasyUI - panel 高度自适应： height:auto;`即可实现高度自适应。` <div class="easyui-panel" style="wi

小鱼儿/ 2023年10月06日 09:09/ 0 赞/ 6 阅读

相关初学Panel面板

Panel面板不能单独存在 panel可以理解为在frame窗口内的面板，不能单独存在 //Panel 可以看成一个空间不能单独存在 public cl

ゞ浴缸里的玫瑰/ 2023年01月13日 10:59/ 0 赞/ 214 阅读

相关 03-EasyUI_panel

panel的使用 \- panel属性的设置 \- panel方法的调用 \- 属性iconCls的设置 \- open/close/destroy方法

叁歲伎倆/ 2022年09月17日 15:21/ 0 赞/ 206 阅读

相关 Vue封装组件-面板2-LjPanel2

效果图： ![20210809113400706.png][]![20210809093006114.png][] 使用： <LjPanel2

阳光穿透心脏的1/2处/ 2022年09月03日 16:18/ 0 赞/ 148 阅读

相关 2、EasyUI的panel面板组件

1、panel是其他组件的容器。 data-options:是数据配置选项 tools表示配置图标和绑定的事件函数里面可以直接写匿名函数也可以写函数名 <table

柔情只为你懂/ 2022年06月03日 10:58/ 0 赞/ 319 阅读

相关 jQuery EasyUI API 中文文档 - Panel面板

(学习留存，如有侵权，请告知，立刻删除！) 用$.fn.panel.defaults重写defaults。![20110930012631857.png][] 用法示例

╰+哭是因爲堅強的太久メ/ 2022年03月19日 06:23/ 0 赞/ 446 阅读

相关 bootstrap---panel面板组件

<!--可以自行修改头部颜色 .panel panel-success .panel panel-danger .panel panel-i

桃扇骨/ 2022年02月21日 07:39/ 0 赞/ 297 阅读

相关 EasyUI panel 插件使用

EasyUI 插件的两种使用方法 list 使用EasyUI插件的两种方法：`直接通过标记创建`; `编程创建`。直接从HTML元素创建

深藏阁楼爱情的钟/ 2022年02月13日 09:59/ 0 赞/ 282 阅读

相关 AWT的Panel面板实战

一需求创建一个包含文本框和按钮的Panel面板二代码 import java.awt.Frame; import java.awt.Panel;

朴灿烈づ我的快乐病毒、/ 2021年09月30日 01:38/ 0 赞/ 341 阅读

相关深入理解BootStrap-- 面板(panel)

1、面板面板（`Panels`）是`Bootstrap`框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码： ☑

忘是亡心i/ 2021年06月26日 16:06/ 0 赞/ 750 阅读