easyUI1.7学习第一天_layout(布局)

easyUI1.7学习第一天

1.布局 layout

布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。

依赖
panel
resizable

图片展示

代码实现

html

<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 title',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>

折叠布局面板（Collpase Layout Panel）

$('#cc').layout();
// collapse the west panel 摧毁西边的面板
$('#cc').layout('collapse','west');

通过工具按钮添加西区面板

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

2.折叠面板 Accordion

折叠面板（accordion）允许您提供多个面板（panel），同时显示一个或多个面板（panel）。每个面板（panel）都有展开和折叠的内建支持。点击面板（panel）头部可展开或折叠面板（panel）主体。面板（panel）内容可通过 ajax 指定 ‘href’ 属性来加载。用户可定义被选中的面板（panel）。如果为指定，则默认选中第一个面板（panel）。

图片展示

依赖
panel

代码实现

html

<div id="aa" class="easyui-accordion" style="width: 300px;height: 200px;">
<!--selected:true是初始化选中的面板（panel）索引。该属性自版本 1.3.5 起可用。 -->
<div title="Title1" data-options="iconCls:'icon-save',selected:true" style="overflow: auto;padding:10px;">
<h4>一级标题</h4>
<p>第一级</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px">
<p>第二级</p>
</div>
<div title="Title3">
第三级别
</div>
</div>

我们可以改变或重建折叠面板（Accordion）后，修改某些特性。

<script>
$(function() {
$('#aa').accordion({
animate: false
});
});
</script>

刷新折叠面板（Accordion Panel）内容
调用 ‘getSelected’ 方法来获取当前面板（panel），然后我们可以调用面板（panel）的 ‘refresh’ 方法来加载新内容。

代码实现

var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
if (pp){
pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容
}

3.Panel 面板

面板（panel）当做其他内容的容器使用。它是创建其他组件（比如：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。面板（panel）可以简单地嵌入到网页的任何位置。

代码实现
通过标记创建面板（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>

编程创建面板（创建带右上角工具栏的面板（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')}
}]
});

属性


方法

创建带右上角工具栏的面板

重点内容过多：
以下是官网链接;
Panel面板的方法和属性

4.Tabs 标签页/选项卡

选项卡显示一组面板。它每次只显示一个选项卡面板。每个标签面板都有标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。

依赖
panel
linkbutton

通过标记创建标签页（Tabs）

从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 ‘easyui-tabs’ class 添加到\ <div> 标记。每个标签页面板（tab panel）通过子 <div> 标记被创建，其用法与面板（panel）一样。

代码实现
html

<div id="tt" class="easyui-tabs" style="width: 500px;height: 250px;">
<div title="标签页1" style="padding: 20px;display: none;">
标签页1
</div>
<div title="标签页2" data-options="" style="overflow:auto;padding:20px;display:none;">
可关闭
</div>
<div title="标签页3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
可关闭有图标
</div>
</div>

添加新的标签页面板（tab panel）
js

// 添加一个新的标签页面板（tab panel）
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});

效果如下图

获取选中的标签页（Tab）

// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页（tab）对象

一些附加的属性

至此布局layout已初步学完。