1、為網頁創建邊框布局
邊框布局（border layout）提供五個區域：east、west、north、south、center。以下是一些通常用法：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>為網頁創建邊框布局</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
<style>
.rtitle{
font-size:18px;
font-weight:bold;
padding:5px 10px;
background:#336699;
color:#fff;
}
</style>
<script>
$(function(){
showcontent('http://www.cnblogs.com/jianyeLee/p/5656968.html');
});
</script>
</script>
</head>
<body>
<div class="easyui-layout">class="rtitle">
RSS 在線閱讀
</div>
<div region="west" split="true" title="博文欄目">class="easyui-tree" lines="true" >
<li>
<span>我的博文</span>
<ul>
<li>
<span>easyUI</span>
<ul>
<li><a href="javascript:void(0)" onclick="showcontent('http://www.cnblogs.com/jianyeLee/p/5656968.html')" target="bowen"><span>1、easyUI-創建 CRUD普通dataGrid（表格）</span></a></li>
<li><a href="javascript:void(0)" onclick="showcontent('http://www.cnblogs.com/jianyeLee/p/5657657.html')" target="bowen"><span>2、easyUI-創建 CRUD可編輯dataGrid（表格）</span></a></li>
</ul>
</li>
<li state="closed">
<span>Highcharts</span>
<ul>
<li>
<span>折線圖</span>
<ul>
<li><span>1-Highcharts環境介紹及配置</span></li>
<li><span>2-Highcharts曲線圖之折線圖</span></li>
<li><span>3-Highcharts曲線圖之顯示點值折線圖</span></li>
<li><span>4-Highcharts曲線圖之時間軸折線圖</span></li>
<li><span>5-Highcharts曲線圖之軸反轉</span></li>
<li><span>6-Highcharts曲線圖之帶標識</span></li>
<li><span>7-Highcharts曲線圖之分辨帶</span></li>
<li><span>8-Highcharts曲線圖之對數直線圖</span></li>
</ul>
</li>
<li>
<span>3D圖</span>
<ul>
<li><span>1-Highcharts 3D圖之普通3D柱狀圖與帶空值</span></li>
<li><span>2-Highcharts 3D圖之3D柱狀圖帶可調試傾斜角度</span></li>
<li><span>3-Highcharts 3D圖之3D柱狀圖分組疊堆3D圖</span></li>
<li><span>4-Highcharts 3D圖之3D普通餅圖</span></li>
<li><span>5-Highcharts 3D圖之3D雙餅圖</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="content" region="center" title="在線閱讀">/*
* layout布局
*/
function showcontent(url){
$('#bowen').attr('src',url);
}
2、在面板中創建復雜布局
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在面板中創建復雜布局</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.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('../../../img/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>
<div class="easyui-panel" title="可收縮查詢框" iconCls="icon-search" collapsible="true">class="easyui-layout" fit="true">
<div region="north" border="false" class="p-search">
<label>查詢:</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="../../../img/msn.gif"/>
</div>
<div region="center" border="false">class="easyui-layout" fit="true">
<div region="south" split="true" border="false"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>創建折疊面板</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
</head>
<body>
<div class="easyui-accordion">for jQuery</h3>
<p>content1</p>
</div>
<div title="easyUI" selected="true" iconCls="icon-reload">
<p>content2</p>
</div>
<div title="tree menu" iconCls="icon-cut">
<ul class="easyui-tree" lines="true">
<li>
<span>menu1</span>
<ul>
<li>
<span>sub menu1</span>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</li>
</ul>
</li>
<li>
<span>menu2</span>
</li>
</ul>
</div>
<div title="icon-blank" iconCls="icon-blank">
<p>icon-blank</p>
</div>
<div title="icon-add" iconCls="icon-add">
<p>icon-add</p>
</div>
<div title="icon-edit" iconCls="icon-edit">
<p>icon-edit</p>
</div>
<div title="icon-clear" iconCls="icon-clear">
<p>icon-clear</p>
</div>
<div title="icon-remove" iconCls="icon-remove">
<p>icon-remove</p>
</div>
<div title="icon-save" iconCls="icon-save">
<p>icon-save</p>
</div>
<div title="icon-cut" iconCls="icon-cut">
<p>icon-cut</p>
</div>
<div title="icon-ok" iconCls="icon-ok">
<p>icon-ok</p>
</div>
<div title="icon-no" iconCls="icon-no">
<p>icon-no</p>
</div>
<div title="icon-cancel" iconCls="icon-cancel">
<p>icon-cancel</p>
</div>
<div title="icon-reload" iconCls="icon-reload">
<p>icon-reload</p>
</div>
<div title="icon-search" iconCls="icon-search">
<p>icon-search</p>
</div>
<div title="icon-print" iconCls="icon-print">
<p>icon-print</p>
</div>
<div title="icon-help" iconCls="icon-help">
<p>icon-help</p>
</div>
<div title="icon-undo" iconCls="icon-undo">
<p>icon-undo</p>
</div>
<div title="icon-redo" iconCls="icon-redo">
<p>icon-redo</p>
</div>
<div title="icon-back" iconCls="icon-back">
<p>icon-back</p>
</div>
<div title="icon-sum" iconCls="icon-sum">
<p>icon-sum</p>
</div>
<div title="icon-tip" iconCls="icon-tip">
<p>icon-tip</p>
</div>
<div title="icon-filter" iconCls="icon-filter">
<p>icon-filter</p>
</div>
<div title="icon-man" iconCls="icon-man">
<p>icon-man</p>
</div>
<div title="icon-lock" iconCls="icon-lock">
<p>icon-lock</p>
</div>
<div title="icon-more" iconCls="icon-more">
<p>icon-more</p>
</div>
<div title="icon-mini-add" iconCls="icon-mini-add">
<p>icon-mini-add</p>
</div>
<div title="icon-mini-edit" iconCls="icon-mini-edit">
<p>icon-mini-edit</p>
</div>
<div title="icon-mini-refresh" iconCls="icon-mini-refresh">
<p>icon-mini-refresh</p>
</div>
<div title="icon-large-picture" iconCls="icon-large-picture">
<p>icon-large-picture</p>
</div>
<div title="icon-large-clipart" iconCls="icon-large-clipart">
<p>icon-large-clipart</p>
</div>
<div title="icon-large-shapes" iconCls="icon-large-shapes">
<p>icon-large-shapes</p>
</div>
<div title="icon-large-smartart" iconCls="icon-large-smartart">
<p>icon-large-smartart</p>
</div>
<div title="icon-large-chart" iconCls="icon-large-chart">
<p>icon-large-chart</p>
</div>
</div>
</body>
<html>
4、創建標簽頁（Tabs）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>創建標簽頁（Tabs）</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
</head>
<body>
<div class="easyui-tabs" fit="false">number 選項卡容器寬度。 </p>
<p>height number 選項卡容器高度。 </p>
<p>plain boolean 設置為true時，將不顯示控制面板背景。 </p>
<p>fit boolean 設置為true時，選項卡的大小將鋪滿它所在的容器。 </p>
</div>
<div title="頁簽2" selected="2">
<p>selected number 初始化選中一個tab頁。 </p>
</div>
<div title="頁簽3">
<p>showHeader boolean 設置為true時，顯示tab頁標題。 </p>
</div>
</div>
</body>
<html>
5、動態添加標簽頁（Tabs）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>動態添加標簽頁（Tabs）</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
<style>
.rtitle{
font-size:18px;
font-weight:bold;
padding:5px 5px;
background:#336699;
color:#fff;
}
</style>
</head>
<body>
<div>class="rtitle">
<a href="#" class="easyui-linkbutton" onclick="addTab('bokeyuan','http://www.cnblogs.com/jianyeLee/p/5656968.html')">bokeyuan</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">function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'">;
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
6、添加自動播放標簽頁（Tabs）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>添加自動播放標簽頁（Tabs）</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.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;
}
}, 1000);
});
</script>
</head>
<body>
<div id="tt" class="easyui-tabs" fit="false" pain="true">
<div title="s1">
<img src="../../../img/shirt1.gif" />
</div>
<div title="s2">
<img src="../../../img/shirt2.gif" />
</div>
<div title="s3">
<img src="../../../img/shirt3.gif" />
</div>
<div title="s4">
<img src="../../../img/shirt4.gif" />
</div>
<div title="s5">
<img src="../../../img/shirt5.gif" />
</div>
</div>
</body>
<html>
7、創建 XP 風格左側面板
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>創建 XP 風格左側面板</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
<style>
.demo{
width:200px;height:auto;padding:10px;
}
.panel-body{
background:#f0f0f0;
}
.panel-header{
background:#fff url('../../../img/panel_header_bg.gif') no-repeat top right;
}
.panel-tool-collapse{
background:url('../../../img/arrow_up.gif') no-repeat 0px -3px;
}
.panel-tool-expand{
background:url('../../../img/arrow_down.gif') no-repeat 0px -3px;
}
</style>
</head>
<body>
<div >
<div class="easyui-panel demo" title="工具" collapsible="true">
<p>content</p>
</div>
<br/>
<div class="easyui-panel demo" title="文件夾" collapsible="true" collapsed="true">
<p>content</p>
</div>
<br/>
<div class="easyui-panel demo" title="地址" collapsible="true" collapsed="true">
<p>content</p>
</div>
<br/>
<div class="easyui-panel demo" title="詳情" collapsible="true" collapsed="true">
<p>content</p>
</div>
</div>
</body>
<html>
這些代碼布局 都不需要什麼js，直接使用class即可；
