1、Layout布局
通过 $.fn.layout.defaults 重写默认的 defaults。
布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。
1、通过标记创建布局（Layout）。
添加 'easyui-layout' class 到 <div> 标记。
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
2、通过 ajax 加载内容。
布局（layout）是基于面板（panel）创建的。各区域面板提供从 URL 动态加载内容的内建支持。使用动态加载技术，用户可以让他们的布局页面更快地显示。
<body class="easyui-layout">
<div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
<div data-options="region:'center',href:'center_content.php'" ></div>
</body>
通过工具按钮添加西区面板
$('#cc').layout('add',{
region: 'west',
width: 180,
title: 'West Title',
split: true,
tools: [{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-remove',
handler:function(){alert('remove')}
}]
});
区域面板选项（Region Panel Options）是定义在面板（panel）组件中，下面是一些共同的和新增的属性：
region:定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
border:当设置为 true 时，就显示布局面板（layout panel）的边框。
split:当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。
href:从远程站点加载数据的 URL 。
方法：
2、Panel面板
通过 $.fn.panel.defaults 重写默认的 defaults。
面板（panel）当做其他内容的容器使用。它是创建其他组件（比如：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。面板（panel）可以简单地嵌入到网页的任何位置。
1、通过标记创建面板（Panel）
从标记创建面板（Panel）更容易。把 'easyui-panel' class 添加到 <div> 标记。
<div id="p" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>
2、编程创建面板（Panel）
让我们创建带右上角工具栏的面板（Panel）。
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
$('#p').panel({
width:500,
height:150,
title:'My Panel',
tools:[{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
3、移动面板（Panel）
调用 'move' 方法把面板（Panel）移动到新位置。
$('#p').panel('move',{
left:100,
top:100
});
4、加载内容
让我们通过 ajax 加载面板（panel）内容并且当加载成功时显示一些信息。
$('#p').panel({
href:'content_url.php',
onLoad:function(){
alert('loaded successfully');
}
});
属性：
style：给面板（panel）添加自定义格式的样式。改变面板（panel）边框宽度的代码实例：
<div class="easyui-panel" style="width:200px;height:100px"
data-options="style:{borderWidth:2}">
</div>
tools：自定义工具组，可能的值：
1、数组，每个元素包含 iconCls 和 handler 两个属性。
2、选择器，指示工具组。
面板（panel）工具组可通过已存在 <div> 标签声明：
<div class="easyui-panel" style="width:300px;height:200px"
title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
面板（panel）工具组可通过数组定义：
<div class="easyui-panel" style="width:300px;height:200px"
title="My Panel" data-options="iconCls:'icon-ok',tools:[
{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-edit',
handler:function(){alert('edit')}
}]">
</div>
href：一个 URL，用它加载远程数据并且显示在面板（panel）里。请注意，除非面板（panel）打开，否则内容不会被加载。这对创建一个惰性加载的面板（panel）很有用：
<div id="pp" class="easyui-panel" style="width:300px;height:200px" data-options="href='get_content.php',closed:true"></div>
<a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>
事件：
onBeforeClose：面板（panel）关闭前触发，返回 false 就取消关闭。下面声明的面板（panel）不会关闭。
<div class="easyui-panel" style="width:300px;height:200px;" title="My Panel" data-options="onBeforeClose:function(){return false}">
The panel cannot be closed.
</div>
方法：
refresh：href->刷新面板（panel）加载远程数据。如果分配了 'href' 参数，将重写旧的 'href' 属性。
// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
resize：options->设置面板（panel）尺寸并做布局。Options 对象包含下列属性：
width：新的面板（panel）宽度
height：新的面板（panel）宽度
left：新的面板（panel）左边位置
top：新的面板（panel）顶部位置
$('#pp').panel('resize',{
width: 600,
height: 400
});
3、Accordion折叠面板
通过 $.fn.accordion.defaults 重写默认的 defaults。
折叠面板（accordion）允许您提供多个面板（panel），同时显示一个或多个面板（panel）。每个面板（panel）都有展开和折叠的内建支持。点击面板（panel）头部可展开或折叠面板（panel）主体。面板（panel）内容可通过 ajax 指定 'href' 属性来加载。用户可定义被选中的面板（panel）。如果为指定，则默认选中第一个面板（panel）。
通过标记创建折叠面板（Accordion），添加 'easyui-accordion' class 到 <div> 标记。
<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>
我们可以改变或重建折叠面板（Accordion）后，修改某些特性。
$('#aa').accordion({
animate:false
});
调用 'getSelected' 方法来获取当前面板（panel），然后我们可以调用面板（panel）的 'refresh' 方法来加载新内容。
var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
if (pp){
pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容
}
面板（Panel）选项
折叠面板（Accordion）的面板（panel）选项继承自面板（panel），下面是附加的属性：
事件
方法：
getPanelIndex：panel->获取指定的面板（panel）索引。该方法自版本 1.3 起可用。
下面的实例显示如何获取选中的面板（panel）索引。
var p = $('#aa').accordion('getSelected');//获取第一个选中的面板
if (p){
var index = $('#aa').accordion('getPanelIndex', p);
alert(index);
}
4、Tabs标签页/选项卡
通过 $.fn.tabs.defaults 重写默认的 defaults。
The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.
依赖
- panel
- linkbutton
1、通过标记创建标签页（Tabs）
从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 'easyui-tabs' class 添加到 <div> 标记。每个标签页面板（tab panel）通过子 <div> 标记被创建，其用法与面板（panel）一样。
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
2、编程创建标签页（Tabs）
现在我们编程创建标签页（Tabs），我们同时捕捉 'onSelect' 事件。
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
3、添加新的标签页面板（tab panel）
通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。
// 添加一个新的标签页面板（tab panel）
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
4、获取选中的标签页（Tab）
// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页（tab）对象
5、刷新tab标签页
var currentTab= $('#tt').tabs('getSelected');
$('#tt').tabs('update', {
tab: currentTab,
options: {
href: url//远程服务链接
}
});
currentTab.panel('refresh');
属性
tools:array,selector->放置在头部的左侧或右侧的工具栏，可能的值：
1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。
2、选择器，指示包含工具的 <div>。
通过数组定义工具
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
通过已有的 DOM 容器定义工具。
$('#tt').tabs({
tools:'#tab-tools'
});
<div id="tab-tools">
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
事件
onBeforeClose->title,index:当一个标签页面板（tab panel）被关闭前触发，返回 false 就取消关闭动作。下面的实例演示如何在关闭标签页面板（tab panel）前显示确认对话框。
$('#tt').tabs({
onBeforeClose: function(title){
return confirm('Are you sure you want to close ' + title);
}
});
// using the async confirm dialog
$('#tt').tabs({
onBeforeClose: function(title,index){
var target = this;
$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
if (r){
var opts = $(target).tabs('options');
var bc = opts.onBeforeClose;
opts.onBeforeClose = function(){}; // allowed to close now
$(target).tabs('close',index);
opts.onBeforeClose = bc; // restore the event function
}
});
return false; // prevent from closing
}
});
方法
add->options：添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。
当添加一个新的标签页面板（tab panel）时，它将被选中。
如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。
// add a unselected tab panel
$('#tt').tabs('add',{
title: 'new tab',
selected: false
//...
});
getSelected->获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
update->param:更新指定的标签页面板（tab panel），param 参数包含两个属性：
tab：被更新的标签页面板（tab panel）。
options：面板（panel）的选项（options）。
// update the selected panel with new title and content
var tab = $('#tt').tabs('getSelected'); // get selected panel
$('#tt').tabs('update', {
tab: tab,
options: {
title: 'New Title',
href: 'get_content.php' // the new content URL
}
}); // call 'refresh' method for tab panel to update its content
var tab = $('#tt').tabs('getSelected'); // get selected panel
tab.panel('refresh', 'get_content.php');
标签页面板（tab panel）属性被定义在面板（panel）组件里，下面是一些常用的属性。
