第 9 章 Panel(面板)组件

学习要点:

1.加载方式

2.属性列表

3.事件列表

4.方法列表

---

本节课重点了解 EasyUI 中 Panel(面板)组件的使用方法，这个组件不依赖于其他组件。

一.加载方式

//class 加载方式
<div class="easyui-panel" data-options="closable:true" title="My Panel" style="width:500px;">
    <p>内容区域</p>
</div>

//JS 加载调用 
$('#box').panel({
     width:500,
     height:150,
     title : '面板',
     closable : true,
});

二.属性列表

Panel 属性

属性名	值	说明
id	string	面板的 ID 值。默认为 null。
title	string	面板显示的标题文本。默认为 null。
iconCls	string	设置一个 16x16 图标的 CSS 类 ID 显示在面板左 上角。默认为 null。
width	number	设置面板宽度。默认值 auto。
height	number	设置面板高度。默认值 auto。
left	number	设置面板距离左边的位置(即 X 轴位置)。默认为 null。
top	number	设置面板距离顶部的位置(即 Y 轴位置)。默认为null。

cls	string	添加一个 CSS 类 ID 到面板。默认为 null。
headerCls	string	添加一个 CSS 类 ID 到面板头部。默认为 null。
bodyCls	string	添加一个 CSS 类 ID 到面板正文部分。默认为 null。
style	subject	添加一个当前指定样式到面板。默认为{}。
fit	boolean	当设置为 true 的时候面板大小将自适应父容器。 默认为 false。
border	boolean	定义是否显示面板边框。默认为 true
doSize	boolean	如果设置为 true，在面板被创建的时候将重置大 小和重新布局。默认为 true。
noheader	boolean	如果设置为 true。将不会创建面板标题。默认为 false。
content	string	面板主体内容。默认为 null。
collapsible