所需CDN：
<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>
第一篇 布局
边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：
- north 区域可以用来显示网站的标语。
- south 区域可以用来显示版权以及一些说明。
- west 区域可以用来显示导航菜单。
- east 区域可以用来显示一些推广的项目。
- center 区域可以用来显示主要的内容。
1.1 为网页创建边框布局
html代码：
<%--确定一个容器--%>
<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="#"相比，便是不刷新跳转
- 2. 此处的样式修改并不好修改，由于是封装在内部的属性，如果要对某一个panel进行样式修改，需要通过调试界面找到自己能定义到的一个id或者class，然后一层一层找下去进行修改，这样有一个不好的地方就是后期如果在里面添加节点或者删除节点，样式就失效了……这里面如果对相同的class一起重新加载样式的方式简单一些，可用！important进行修改，或者通过jq选择器动态修改。
1.2 EasyUI 在面板中创建复杂布局
第一步：先创建一个面板，名字：复杂的面板布局 图标：icon-search 可折叠：collapsible="true"
代码：
<div class="easyui-panel" title="复杂的面板布局" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;"></div>
第二步：面板已经完成，开始添加布局
代码：
<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对每一块进行样式修改，因为宽度好高度未指定，可能对某一块进行了覆盖……
在div的class为eassyui-layout里面，region的取值理解：
- ** center:布局的核心部分**
- north:浮动到center的上方——float:top(没有的哈)
- south：浮动到center的下方——float:bottom(没有的哈)
- west：浮动到center的左方——float:left
-
east：浮动到center的右方——float:right
第三步：为每个框里面添加相关内容
头部搜索框
搜索框(样式已经在上面的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>
菜单与按钮在这里并没有用到js和css，内部已经将easyui-menubutton这个class封装好了。如何修改样式在第一篇已经尝试过了……在此做个简单的了解……
第三篇 EasyUI 树形菜单
3.1 使用标记创建树形菜单
简单的树形菜单
代码：
<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>
除了在第一个ul里面添加了一个easyui的类名，其他的跟普通的列表嵌套是一样的……此处也就是将列表的修饰变成的图标，实质还是列表嵌套。
第四篇 Easy UI与Ajax联合使用，并通过后端获取数据库数据
此节参看企业管理系统（传智播客）,这里在使用mvc的同时，很好的阐述了easy ui的使用方式。
网友评论