使用方法：

创建控制面板

1. 使用标签创建控制面板

使用标签创建控制面板十分简单，只须要对<div>标签引用'easyui-panel'类。

<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. 使用脚本创建控制面板

下面的代码将创建一个工具栏在右上方的控制面板。

<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')}
  }]
});

移动控制面板

调用'move'方法可以将控制面板移动到一个新的位置。

$('#p').panel('move',{
  left:100,
  top:100
});

载入内容

下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。

$('#p').panel({
    href:'content_url.php',
    onLoad:function(){
        alert('loaded successfully');
    }
});  

属性：

<div class="easyui-panel" style="width:200px;
    height:100px"  data-options="style:{borderWidth:2}">
</div>

<div style="width:200px;height:100px;padding:5px">
    <div class="easyui-panel" style="width:200px;height:100px"
         data-options="fit:true,border:false">
        Embedded Panel
    </div>
</div>

extractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// only extract body content
	} else {
		return data;
	}
}

事件：

方法：

依赖关系：

• 控制面板
• 链接按钮

使用方法：

创建选项卡

1. 使用HTML标签创建选项卡

使用HTML标签创建选项卡十分简单，不需要写任何javascript代码，只需要<div>标签引用'easyui-panel'类。每个选项卡面板都可以使用闭合的<div>标签对创建，使用方法跟创建控制面板一样。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">
        tab3
    </div>
</div>

2. 使用脚本创建选项卡

下面的代码演示如何使用脚本创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

添加一个选项卡面板

//添加一个选项卡面板
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true
});

获取当前被选择的选项卡

//获取当前被选择的选项卡以及相应的选项卡对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab;    //相应的选项卡对象  

属性：

事件：

$('#tt').tabs('enableTab', 1);	//启用第二个tab panel
$('#tt').tabs('enableTab', 'Tab2');//启用标题为'Tab2'的tab panel

$('#tt').tabs('disableTab', 1);	//禁用第二个tab pane

方法：

选项卡面板：

其他一些属性

依赖关系：

• 控制面板

使用方法：

创建可伸缩面板

使用html标签创建可伸缩面板，只须要对<div>标签引用'easyui-accordion'类。

使用HTML标签创建选项卡十分简单，不需要写任何javascript代码，只需要<div>标签引用'easyui-panel'类。每个选项卡面板都可以使用闭合的<div>标签对创建，使用方法跟创建控制面板一样。

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" 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" iconCls="icon-reload" selected="true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

在后面将介绍如何改变或者重建可伸缩面板以及修改一些特性。

$('#aa').accordion({
    animate:false
}); 

添加一个选项卡面板

//添加一个选项卡面板
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true
});

刷新可伸缩面板的内容

调用'getSelected'方法获取当前面板（的名称），接着可以调用控制面板的'refresh'方法来载入新的内容。

var pp = $('#aa').accordion('getSelected'); //获取当前选择的可伸缩面板
if (pp){
    pp.panel('refresh','new_content.php');  //调用'refresh'方法载入新内容
}  

容器属性（可伸缩面板所在的容器，通常称为‘盒子’）

可伸缩面板属性

可伸缩面板继承控制面板的属性，以下是额外的属性：

事件：

方法：

var p = $('#aa').accordion('getSelected');
if (p){
	var index = $('#aa').accordion('getPanelIndex', p);
	alert(index);
}

依赖关系：

• 控制面板
• 缩放

使用方法：

创建布局面板

使用HTML标签创建布局面板，只须要对<div>标签引用'easyui-layout'类。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div region="north" title="North Title" split="true" style="height:100px;"></div>
    <div region="south" title="South Title" split="true" style="height:100px;"></div>
    <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
    <div region="west" split="true" title="West" style="width:100px;"></div>
    <div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</div>

在整个页面创建布局面板。

<body class="easyui-layout">
<div region="north" title="North Title" split="true" style="height:100px;"></div>
<div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
<div region="west" split="true" title="West" style="width:100px;"></div>
<div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</body>  

折叠布局面板

$('#cc').layout();
//折叠左边的面板
$('#cc').layout('collapse','west');

属性

方法：