jQuery EasyUI 布局 – 为网页创建边框布局
由 keray2002 创建，Carrie 最后一次修改 2015-09-20
jQuery EasyUI 布局 - 为网页创建边框布局
本节将描述如何通过jQuery EasyUI为网页创建边框布局。
边框布局（border layout）包含了五个区域，分别是：east、west、north、south、center。以下是这五个区域的一些通常用法：
- north区域可以用来显示网站的标语。
- south区域可以用来显示版权以及一些说明。
- west区域可以用来显示导航菜单。
- east区域可以用来显示一些推广的项目。
- center区域可以用来显示主要的内容。
为了应用布局（layout），您应该确定一个布局（layout）容器，然后定义一些区域。布局（layout）必须至少需要一个center区域，以下是一个布局（layout）实例：
<div class="easyui-layout" style="width:800px;height:400px;">
<div region="west" split="true" title="Navigator" style="width:150px;">
<p style="padding:5px;margin:0;">Select language:</p>
<ul>
<li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
</ul>
</div>
<div id="content" region="center" title="Language" style="width:250px;padding:5px;">
</div>
<div id="east" region="east" title="east" style="width:150px;padding:5px;">
</div>
<div id="north" region="north" title="north" style="width:150px;padding:5px;">
</div>
<div id="south" region="south" title="south" style="width:150px;padding:5px;">
</div>
</div>
我们在一个<div>容器中创建了一个边框布局（border layout），布局（layout）把容器切割为两个部分，左边是导航菜单，右边是主要内容。
最后我们写一个onclick事件处理函数来检索数据，'showcontent'函数非常简单：
function showcontent(language){
$('#content').html('Introduction to ' + language + ' language');
}
jQuery EasyUI 布局 – 在面板中创建复杂布局
jQuery EasyUI 布局 - 在面板中创建复杂布局
使用jQuery EasyUI布局中的面板（Panel）可以创建复杂的多用途的自定义布局。
在本节的实例中，我们使用面板（panel）和布局（layout）插件来创建一个MSN消息框。
我们在区域面板中使用多个布局（layout）。在消息框的顶部我们放置一个查询输入框，同时在右边放置一个人物图片。在中间的区域我们通过设置split属性为true，把这部分切割为两部分，允许用户改变区域面板的尺寸大小。
以下就是所有代码：
<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
<div class="easyui-layout" fit="true">
<div region="north" border="false" class="p-search">
<label>Search:</label><input></input>
</div>
<div region="center" border="false">
<div class="easyui-layout" fit="true">
<div region="east" border="false" class="p-right">
<img src="images/msn.gif"/>
</div>
<div region="center" border="false" style="border:1px solid #ccc;">
<div class="easyui-layout" fit="true">
<div region="south" split="true" border="false" style="height:60px;">
<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
</div>
<div region="center" border="false">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我们不需要写任何的javascript代码，它自己有非常强大的设计用户界面的功能。
下载 jQuery EasyUI 实例
jeasyui-layout-panel.zip
jQuery EasyUI 布局 – 创建折叠面板
jQuery EasyUI 布局 - 创建折叠面板
本节中，你将了解在jQuery EasyUI布局中如何创建折叠面板（Accordion）。
折叠面板（Accordion）包含一系列的面板（panel）。 所有面板的头部（header）都是可见的，但是一次仅仅显示一个面板的body内容。 当用户点击面板的头部时，该面板的body内容将可见，同时其他面板的body内容将隐藏不可见。
我们将创建三个面板，第三个面板包含一个树形菜单。
<div class="easyui-accordion" style="width:300px;height:200px;">
<div title="About Accordion" iconCls="icon-ok" 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="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">
easyui help you build your web page easily
</div>
<div title="Tree Menu">
<ul id="tt1" class="easyui-tree">
<li>
<span>Folder1</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li><span>File 11</span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File2</span></li>
</ul>
</div>
</div>
下载 jQuery EasyUI 实例
jeasyui-layout-accordion.zip
jQuery EasyUI 布局 – 创建标签页（Tabs）
jQuery EasyUI 布局 - 创建标签页（Tabs）
本节将介绍jQuery EasyUI布局中如何创建标签页（Tabs）。
Tabs中包含了多个面板（panel），它们可以动态地添加或移除。
Tabs能够在相同的页面上显示不同的实体。
Tabs一次仅仅显示一个面板，每个面板都有标题、图标和关闭按钮。当Tabs被选中时，将显示对应的面板的内容。
从HTML标记创建Tabs，包含一个DIV容器和一些DIV面板。
<div class="easyui-tabs" style="width:400px;height:100px;">
<div title="First Tab" style="padding:10px;">
First Tab
</div>
<div title="Second Tab" closable="true" style="padding:10px;">
Second Tab
</div>
<div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
Third Tab
</div>
</div>
我们创建一个带有三个面板的Tabs组件，第二个和第三个面板可以通过点击关闭按钮进行关闭。
下载 jQuery EasyUI 实例
jeasyui-layout-tabs1.zip
jQuery EasyUI 布局 - 动态添加标签页（Tabs）
在上一节中，我们介绍了jQuery EasyUI如何创建标签页（Tabs），本节，你将了解标签页的动态添加。
在jQuery EasyUI中动态添加标签页的方法很简单，您只需要调用'add'方法即可。
在本教程中，我们将使用iframe动态地添加显示在一个页面上的Tabs。当点击添加按钮，一个新的tab将被添加；如果tab已经存在，它将被激活。
步骤 1：创建 Tabs
<div style="margin-bottom:10px">
<a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
</div>
</div>
通过上述的html代码，我们创建了带有一个名为'Home'的tab面板的Tabs。请注意，我们不需要写任何的js代码。
步骤 2：实现 'addTab' 函数
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
我们使用'exists'方法来判断tab是否已经存在，如果已存在则激活tab。如果不存在则调用'add'方法来添加一个新的tab面板。
下载 jQuery EasyUI 实例
jeasyui-layout-tabs2.zip
jQuery EasyUI 布局 - 添加自动播放标签页（Tabs）
你可以使用jQuery EasyUI来添加自动播放的标签页（Tabs）。
一个自动播放的Tabs会显示第一个tab面板，然后显示第二个、第三个... 我们将通过一些代码来实现tab面板的自动切换，然后让它循环。
步骤 1：创建 Tabs
<div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
<div title="Shirt1" style="padding:20px;">
<img src="images/shirt1.gif">
</div>
<div title="Shirt2" style="padding:20px;">
<img src="images/shirt2.gif">
</div>
<div title="Shirt3" style="padding:20px;">
<img src="images/shirt3.gif">
</div>
<div title="Shirt4" style="padding:20px;">
<img src="images/shirt4.gif">
</div>
<div title="Shirt5" style="padding:20px;">
<img src="images/shirt5.gif">
</div>
</div>
步骤 2：写自动播放代码
var index = 0;
var t = $('#tt');
var tabs = t.tabs('tabs');
setInterval(function(){
t.tabs('select', tabs[index].panel('options').title);
index++;
if (index >= tabs.length){
index = 0;
}
}, 3000);
正如您所看到的，我们调用'tabs'方法来得到所有tab面板，并使用'setInterval'函数来切换他们。
下载 jQuery EasyUI 实例
jeasyui-layout-tabs3.zip
jQuery EasyUI 布局 - 创建 XP 风格左侧面板
本节将介绍如何使用jQuery EasyUI中的面板（panel）插件来创建Windows XP风格的左侧面板。
通常情况下，在Windows XP的资源管理器文件夹中，左侧的面板（panel）包含一些常见任务。
定义一些面板（panel）
我们定义一些面板，这些面板用来显示一些任务。每个面板应该至少有折叠/展开工具按钮。
代码如下所示：
<div style="width:200px;height:auto;background:#7190E0;padding:5px;">
<div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
View as a slide show<br/>
Order prints online<br/>
Print pictures
</div>
<br/>
<div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
Make a new folder<br/>
Publish this folder to the Web<br/>
Share this folder
</div>
<br/>
<div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
New York<br/>
My Pictures<br/>
My Computer<br/>
My Network Places
</div>
<br/>
<div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
My documents<br/>
File folder<br/><br/>
Date modified: Oct.3rd 2010
</div>
</div>
自定义面板（panel）的外观效果
请注意，这个视图外观效果不是我们想要的，我们必须改变面板（panel）的头部背景图片和折叠/展开按钮的图标。
做到这一点并不难，我们需要做的只是重新定义一些CSS。
.panel-body{
background:#f0f0f0;
}
.panel-header{
background:#fff url('images/panel_header_bg.gif') no-repeat top right;
}
.panel-tool-collapse{
background:url('images/arrow_up.gif') no-repeat 0px -3px;
}
.panel-tool-expand{
background:url('images/arrow_down.gif') no-repeat 0px -3px;
}
由此可见，使用easyui定义用户界面非常简单。
下载 jQuery EasyUI 实例
jeasyui-layout-xp.zip
相关教程
《CSS教程》
