所需CDN：
<link rel="stylesheet" type="text/css" >
<link rel="stylesheet" type="text/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>
第一篇 布局
邊框布局（border layout）提供五個(gè)區(qū)域：east、west、north食寡、south、center廓潜。以下是一些通常用法：
- north 區(qū)域可以用來(lái)顯示網(wǎng)站的標(biāo)語(yǔ)抵皱。
- south 區(qū)域可以用來(lái)顯示版權(quán)以及一些說(shuō)明。
- west 區(qū)域可以用來(lái)顯示導(dǎo)航菜單茉帅。
- east 區(qū)域可以用來(lái)顯示一些推廣的項(xiàng)目叨叙。
- center 區(qū)域可以用來(lái)顯示主要的內(nèi)容。
1.1 為網(wǎng)頁(yè)創(chuàng)建邊框布局
html代碼：
<%--確定一個(gè)容器--%>
<div class="easyui-layout box">
<div region="west" class="test" split="true" title="Navigator" style="width:150px;background-color:Red;">
<p>Select language</p>
<ul>
<li><a href="javascript:void(0)" onclick="showcontent('java')">java</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('csharp')">C#</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('php')">php</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('python')">python</a></li>
</ul>
</div>
<div class="test" id="content" region="center" title="Language" style="padding:5px;background-color:blue;"></div>
</div>
css代碼：
<style type="text/css">
.easyui-layout.box{width:400px;height:200px;}
<%--.panel-title{background-color:Red!important;}--%>
.easyui-layout.box.layout>.panel.layout-panel.layout-panel-west.layout-split-west>.panel-header{color:Yellow;padding:0px;background-color:Blue;}
.easyui-layout.box.layout>.panel.layout-panel.layout-panel-west.layout-split-west>.panel-header>.panel-title{background-color:Blue;}
</style>
js代碼：
<script type="text/javascript" language="javascript">
function showcontent(language) {
$('#content').html('Introduce to' + language + 'language');
}
</script>
理解：
- 1. href="javascript:void(0)"與href="#"相比堪澎，便是不刷新跳轉(zhuǎn)
- 2. 此處的樣式修改并不好修改擂错，由于是封裝在內(nèi)部的屬性，如果要對(duì)某一個(gè)panel進(jìn)行樣式修改樱蛤，需要通過(guò)調(diào)試界面找到自己能定義到的一個(gè)id或者class钮呀，然后一層一層找下去進(jìn)行修改，這樣有一個(gè)不好的地方就是后期如果在里面添加節(jié)點(diǎn)或者刪除節(jié)點(diǎn)昨凡，樣式就失效了……這里面如果對(duì)相同的class一起重新加載樣式的方式簡(jiǎn)單一些爽醋，可用！important進(jìn)行修改便脊，或者通過(guò)jq選擇器動(dòng)態(tài)修改蚂四。
1.2 EasyUI 在面板中創(chuàng)建復(fù)雜布局
第一步：先創(chuàng)建一個(gè)面板，名字：復(fù)雜的面板布局 圖標(biāo)：icon-search 可折疊：collapsible="true"
代碼：
<div class="easyui-panel" title="復(fù)雜的面板布局" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;"></div>
第二步：面板已經(jīng)完成哪痰，開(kāi)始添加布局
代碼：
<div class="easyui-layout" fit="true">
<div region="north" border="false" class="p-search">
上部分搜索框
</div>
<div region="center" border="false">
<div class="easyui-layout" fit="true">
<div region="east" border="false" class="p-right">
右部的圖片
</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;">
底部的輸入部分
</div>
<div region="center" border="false">
</div>
</div>
</div>
</div>
</div>
</div>
css：
.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;
}
用css對(duì)每一塊進(jìn)行樣式修改遂赠，因?yàn)閷挾群酶叨任粗付ǎ赡軐?duì)某一塊進(jìn)行了覆蓋……
在div的class為eassyui-layout里面晌杰，region的取值理解：
- ** center:布局的核心部分**
- north:浮動(dòng)到center的上方——float:top(沒(méi)有的哈)
- south：浮動(dòng)到center的下方——float:bottom(沒(méi)有的哈)
- west：浮動(dòng)到center的左方——float:left
-
east：浮動(dòng)到center的右方——float:right
第三步：為每個(gè)框里面添加相關(guān)內(nèi)容
頭部搜索框
搜索框(樣式已經(jīng)在上面的css代碼里)：
<label>Search:</label><input></input>
右部的圖片
右部的圖片：
底部的textarea
底部的textarea：
<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
完成界面
第二篇 EasyUI 菜單與按鈕
2.1 Menu Button
代碼：
<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
<a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
<a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
</div>
<div id="mm1" style="width:150px;">
<div iconCls="icon-undo">Undo</div>
<div iconCls="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div iconCls="icon-remove">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>
菜單與按鈕在這里并沒(méi)有用到j(luò)s和css跷睦，內(nèi)部已經(jīng)將easyui-menubutton這個(gè)class封裝好了。如何修改樣式在第一篇已經(jīng)嘗試過(guò)了……在此做個(gè)簡(jiǎn)單的了解……
第三篇 EasyUI 樹(shù)形菜單
3.1 使用標(biāo)記創(chuàng)建樹(shù)形菜單
簡(jiǎn)單的樹(shù)形菜單
代碼：
<ul class="easyui-tree">
<li>
<span>Folder</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>File21</span></li>
</ul>
除了在第一個(gè)ul里面添加了一個(gè)easyui的類名肋演，其他的跟普通的列表嵌套是一樣的……此處也就是將列表的修飾變成的圖標(biāo)抑诸，實(shí)質(zhì)還是列表嵌套。
第四篇 Easy UI與Ajax聯(lián)合使用爹殊，并通過(guò)后端獲取數(shù)據(jù)庫(kù)數(shù)據(jù)
此節(jié)參看企業(yè)管理系統(tǒng)（傳智播客）,這里在使用mvc的同時(shí)蜕乡，很好的闡述了easy ui的使用方式。
