边框布局（border layout）
提供五个区域：east、west、north、south、center。以下是一些通常用法：
- north 区域可以用来显示网站的标语。
- south 区域可以用来显示版权以及一些说明。
- west 区域可以用来显示导航菜单。
- east 区域可以用来显示一些推广的项目。
- center 区域可以用来显示主要的内容。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyUI布局 边框布局 </title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function showcontent(language){
$('#content').html('Introduction to ' + language + ' language');
}
$(function(){
showcontent('java');
});
</script>
</head>
<body>
<div class="easyui-layout" style="width:800px;height:600px;">
<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="内容" style="padding:5px;">
center
</div>
<div id="content" region="north" title="文明上网" >
</div>
<div id="content" region="south" title="copyright:@shj" >
</div>
<div id="content" region="east" title="广告" style="padding:5px; width: 100px;height: 30px;float: right;" >
推广广告
</div>
</div>
</body>
</html>效果
复杂布局
面板（Panel）允许创建用于多种用途的自定义布局
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyUI布局 复杂布局 </title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<style>
.p-search{
background:#fafafa;
padding:5px;
border:1px solid #ccc;
border-bottom:0;
overflow:hidden;
}
.p-search input{
width:300px;
border:1px solid #ccc;
background: #fff url('../images/search.png') no-repeat right top;
}
.p-right{
text-align:center;
border:1px solid #ccc;
border-left:0;
width:150px;
background:#fafafa;
padding-top:10px;
}
</style>
</head>
<body style="background:#fafafa;">
<h1>使用Panel布局</h1>
<div class="easyui-panel" title="复杂页面布局" 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>
</body>
</html>效果
创建折叠面板
折叠面板（Accordion）包含一系列的面板（panel）。 所有面板（panel）的头部（header）都是可见的，但是一次仅仅显示一个面板（panel）的 body 内容。 当用户点击面板（panel）的头部（header）时，该面板（panel）的 body 内容将可见，同时其他面板（panel）的 body 内容将隐藏不可见
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyUI布局 折叠面板</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-accordion" style="width:300px;height:200px;">
<div title="Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">折叠面板</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.
accordion是 jquery easyUI框架的一部分,他能让你更容易的在web页面上使用折叠面板
</p>
</div>
<div title="easyui" iconCls="icon-reload" selected="true" style="padding:10px;">
easyui help you build your web page easily
easyUI 能帮助你更方便的构建网页
</div>
<div title="中国">
<ul id="tt1" class="easyui-tree">
<li>
<span>河南</span>
<ul>
<li>
<span>省会郑州</span>
<ul>
<li><span>驻马店</span></li>
<li><span>洛阳</span></li>
<li><span>开封</span></li>
</ul>
</li>
<li><span>介绍</span></li>
<li><span>旅游景点</span></li>
</ul>
</li>
<li><span>名人轶事</span></li>
</ul>
</div>
</div>
</body>
</html>效果图
标签页
使用 easyui 创建一个 Tabs 组件。 Tabs 有多个可以动态地添加或移除的面板（panel）。 可以使用 Tabs 来在相同的页面上显示不同的实体。Tabs 一次仅仅显示一个面板（panel），每个面板（panel）都有标题、图标和关闭按钮。 当 Tabs 被选中时，将显示对应的面板（panel）的内容。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyUI布局 标签页</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<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>
</body>
</html>
动态标签
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyUI布局 动态标签页</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>
<script>
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
});
}
}
</script>
</head>
<body>
<div style="margin-bottom:10px">
<a href="#" class="easyui-linkbutton" onclick="addTab('百度','http://www.baidu.com')">baidu</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>
</body>
</html>
自动轮播
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> easyUI 自动播放标签</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script>
$(function(){
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);
});
</script>
</head>
<body>
<div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
<div title="dog1" style="padding:20px;">
<img src="../images/dog1.jpg">
</div>
<div title="dog2" style="padding:20px;">
<img src="../images/dog2.jpg">
</div>
<div title="dog3" style="padding:20px;">
<img src="../images/dog3.jpg">
</div>
<div title="dog4" style="padding:20px;">
<img src="../images/dog4.jpg">
</div>
<div title="dog5" style="padding:20px;">
<img src="../images/dog5.jpg">
</div>
</div>
</body>
</html>
资源管理器左侧
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> easyUI 资源管理器左侧</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<style>
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>