jQuery EasyUI 布局 – 为网页创建边框布局
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="800px;height:400px;"> <div region="west" split="true" title="Navigator" style="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="250px;padding:5px;"> </div> <div id="east" region="east" title="east" style="150px;padding:5px;"> </div> <div id="north" region="north" title="north" style="150px;padding:5px;"> </div> <div id="south" region="south" title="south" style="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;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;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 实例
jQuery EasyUI 布局 – 创建折叠面板
jQuery EasyUI 布局 - 创建折叠面板
本节中，你将了解在jQuery EasyUI布局中如何创建折叠面板（Accordion）。
折叠面板（Accordion）包含一系列的面板（panel）。 所有面板的头部（header）都是可见的，但是一次仅仅显示一个面板的body内容。 当用户点击面板的头部时，该面板的body内容将可见，同时其他面板的body内容将隐藏不可见。
我们将创建三个面板，第三个面板包含一个树形菜单。
<div class="easyui-accordion" style="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 实例
jQuery EasyUI 布局 – 创建标签页（Tabs）
jQuery EasyUI 布局 - 创建标签页（Tabs）
本节将介绍jQuery EasyUI布局中如何创建标签页（Tabs）。
Tabs中包含了多个面板（panel），它们可以动态地添加或移除。
Tabs能够在相同的页面上显示不同的实体。
Tabs一次仅仅显示一个面板，每个面板都有标题、图标和关闭按钮。当Tabs被选中时，将显示对应的面板的内容。
从HTML标记创建Tabs，包含一个DIV容器和一些DIV面板。
<div class="easyui-tabs" style="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 实例
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="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="100%;height:100%;"></iframe>'; $('#tt').tabs('add',{ title:title, content:content, closable:true }); } }
我们使用'exists'方法来判断tab是否已经存在，如果已存在则激活tab。如果不存在则调用'add'方法来添加一个新的tab面板。
下载 jQuery EasyUI 实例
jQuery EasyUI 布局 - 添加自动播放标签页（Tabs）
你可以使用jQuery EasyUI来添加自动播放的标签页（Tabs）。
一个自动播放的Tabs会显示第一个tab面板，然后显示第二个、第三个... 我们将通过一些代码来实现tab面板的自动切换，然后让它循环。
步骤 1：创建 Tabs
<div id="tt" class="easyui-tabs" style="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 实例
jQuery EasyUI 布局 - 创建 XP 风格左侧面板
本节将介绍如何使用jQuery EasyUI中的面板（panel）插件来创建Windows XP风格的左侧面板。
通常情况下，在Windows XP的资源管理器文件夹中，左侧的面板（panel）包含一些常见任务。
定义一些面板（panel）
我们定义一些面板，这些面板用来显示一些任务。每个面板应该至少有折叠/展开工具按钮。
代码如下所示：
<div style="200px;height:auto;background:#7190E0;padding:5px;"> <div class="easyui-panel" title="Picture Tasks" collapsible="true" style="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="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="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="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定义用户界面非常简单。