2.1、panel(面板)
panel面板是easyui里面非常基础的一个内容组件，在我们后期学的tabs (选项卡)、accordion(手风琴)这两种内容组件都依赖于panel组件。构建一个panel组件代码如下
$("#myDiv").panel({
title: "js方式的panel",
width: 300,
height: 500,
fit: true,加上这个会看不到设置面板内容
border: true,
content: "设置面板内容",
)}
2.1.1、panel其他常用属性
l loadingMessage：在加载远程数据的时候在面板内显示一条消息。
l href：panel内容加载地址
l collapsible：添加收缩/显示按钮
l closable：显示关闭按钮
l minimized：显示最大化按钮
l maximized：显示最小化按钮
l closed:初始的时候是否关闭面板
2.1.2、panel-添加tools
如果我们需要给panel的头上面加上如上图的功能按钮就可以使用panel的tools属性给面板添加一个工具按钮，代码如下
tools: [{
iconCls: 'icon-add',
handler: function () {
$.messager.alert("系统提示","你点击了添加按钮");
}
}, {
iconCls: "icon-save",
handler: function () {
$.messager.alert("系统提示","你点击了保存按钮");
}
}]
2.2、tabs(选项卡)
同过依赖关系,我们可以得知tabs依赖panel与linkbutton。说明tabs同样能使用panel属性及方法，tabs的add方法是给他tabs添加一个tab页
var tabs = $("#tt").tabs({
border: false,
fit: true,
});
$('#tt').tabs('add', {
title: 'Tab页',
content: 'tab页内',
closable: true,
width: 50,
});
2.2.1、tabs(选项卡)--常用属性
l plain:简洁模式
l toolPosition:工具栏位置,有left与right两个值
l tabPosition:标签位置,有top、bottom、left、right
l headerWidth:标签的宽度,只有toolPosition为left、right有效
l scrollDuration: 每个滚动动画持续时间
l scrollIncrement:每次标签滚动的像素
2.2.2、tabs(选项卡)—tools
同样tabs也有tools但是tools用在不同的地方就会有不同的效果
tools: [{
iconCls: 'icon-add',
handler: function () {
alert('add');
}
}]
easyui针对标签这种比较特殊的tools写了一个默认的icon-mini的图标样式
tools: [{
iconCls: 'icon-mini-refresh',
handler: function () {
alert('refresh');
}
}]
3、Accordion(手风琴)
accordion(手风琴)布局是将一组相关的功能或者内容放到一起，每个选项卡我们都可以使用href加载内容,也可以使用content属性设置值
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
我们可以更改或修改面板的一些功能以后再重新创建它。
$('#aa').accordion({
animate:false
});