准备
下载：http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.5.zip 在页面引入必要的资源
布局
<div class="easyui-layout">
<div region="north" title="北部" style="height:100px">北部内容</div>
<div region="west" title="西部" style="width:100px">西部内容</div>
<div region="center" title="中部">中部</div>
<div region="south" title="南部" style="height:100px">南部内容</div>
<div region="east" title="东部" style="width:100px">东部内容</div>
</div>
折叠面板
<!-- fit为真则占满父容器 -->
<div class="easyui-accordion" fit="true">
<!-- iconCls的值在icon.css里面选 -->
<div title="面板一" iconCls="icon-ok">面板一</div>
<div title="面板二">面板二</div>
<div title="面板三">面板三</div>
<div>
标签页
<div class="easyui-tabs" fit="true">
<!-- closable为真则可关闭 -->
<div title="标题一" closable="true">内容一</div>
<div title="标题二">内容二</div>
<div title="标题三">内容三</div>
</div>
树形菜单
<ul class="easyui-tree">
<li>
<span>一级菜单1</span>
<ul>
<li>
<span>二级菜单1</span>
<ul>
<li><span>三级菜单1</span></li>
<li><span>三级菜单2</span></li>
<li><span>三级菜单3</span></li>
</ul>
</li>
<li><span>二级菜单2</span></li>
<li><span>二级菜单3</span></li>
</ul>
</li>
<li><span>一级菜单2</span></li>
</ul>
消息显示框
$.messager.show({
title: '标题',
msg: '内容',
timeout: 5000
showType: 'slide'
});
消息弹出框
$.messager.alert('标题', '内容', 'error'); // error, info, question, warning
消息确认框
$.messager.confirm('标题', 'xxx?', function(r) {
if(r) { alert('xxx: ' + r); }
});
登录窗口
<div id="w" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-save'" title="Login" style="width:300px;height:180px;">
<form style="padding:10px 20px 10px 40px;">
<p>Name: <input type="text"></p>
<p>Pass: <input type="password"></p>
<div style="padding:5px;text-align:center;">
<a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a>
<a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>
</div>
</form>
</div>
<div>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
</div>
表单校验
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" type="text" name="name" required="true"></input>
</div>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
</div>
<div>
<label for="subject">Subject:</label>
<input class="easyui-validatebox" type="text" name="subject" required="true"></input>
</div>
<div>
<label for="message">Message:</label>
<textarea name="message" style="height:60px;"></textarea>
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
转载于:https://www.cnblogs.com/hippiebaby/p/5493007.html
相关资源：easyui超漂亮前端模板，兼容IE6
