想必关注jQuery的同学们对jQuery EasyUI已经有所耳闻了，目前已经更新到1.0.5版本，风格与EXTJS有点相似，可以很好的满足开发人员对UI的需求。
jQuery EasyUI
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。
OK，下面就开始我们的初探之旅。
jQuery EasyUI---Accordion
手风琴效果，大家应该很熟悉。
基本代码：
<!--<br/ />
<br/ />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />
http://www.CodeHighlighter.com/<br/ />
<br/ />
--><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accordion</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"></script>
</head>
<body>
<divstyle="overflow:auto;width:600px;height:300px;padding:10px;border:1pxsolid#ccc;">
<divid="aa"class="easyui-accordion"fit="true"style="width:300px;height:200px;">
<divtitle="Title1"style="overflow:auto;padding:10px;">
<h3>Accordion1</h3>
</div>
<divtitle="Title2"style="padding:10px;">
<h3>Accordion2</h3>
</div>
<divtitle="Title3">
<h3>Accordion3</h3>
</div>
</div>
</div>
</body>
</html>
<head>
<title>Accordion</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"></script>
</head>
<body>
<divstyle="overflow:auto;width:600px;height:300px;padding:10px;border:1pxsolid#ccc;">
<divid="aa"class="easyui-accordion"fit="true"style="width:300px;height:200px;">
<divtitle="Title1"style="overflow:auto;padding:10px;">
<h3>Accordion1</h3>
</div>
<divtitle="Title2"style="padding:10px;">
<h3>Accordion2</h3>
</div>
<divtitle="Title3">
<h3>Accordion3</h3>
</div>
</div>
</div>
</body>
</html>
代码非常简单，只需要简单的html就可以实现。这里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。
效果：
由于只是简单的html，所以我们可以通过js轻松的对Accordion进行操控，控制大小，位置等等。
jQuery EasyUI---DataGrid
从名字就可以知道这是个数据的绑定和显示控件。
基本代码：
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript">
$(function(){
$('#test').datagrid({
title:'jQueryEasyUI---DataGrid',
iconCls:'icon-save',
width:500,
height:350,
nowrap:false,
striped:true,
url:'../Data/datagrid_data.json',
sortName:'ID',
sortOrder:'desc',
idField:'ID',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'ID',field:'ID',width:80,sortable:true}
]],
columns:[[
{title:'基本信息',colspan:2},
{field:'opt',title:'操作',width:100,align:'center',rowspan:2,
formatter:function(value,rec){
return'<spanstyle="color:red">编辑删除</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true}
]],
pagination:true,
rownumbers:true,
singleSelect:false,
toolbar:[{
text:'添加',
iconCls:'icon-add',
handler:function(){
alert('添加数据')
}
},'-',{
text:'保存',
iconCls:'icon-save',
handler:function(){
alert('保存数据')
}
}]
});
});
</script>
</head>
<body>
<tableid="test"></table>
</body>
</html>
<head>
<title>DataGrid</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript">
$(function(){
$('#test').datagrid({
title:'jQueryEasyUI---DataGrid',
iconCls:'icon-save',
width:500,
height:350,
nowrap:false,
striped:true,
url:'../Data/datagrid_data.json',
sortName:'ID',
sortOrder:'desc',
idField:'ID',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'ID',field:'ID',width:80,sortable:true}
]],
columns:[[
{title:'基本信息',colspan:2},
{field:'opt',title:'操作',width:100,align:'center',rowspan:2,
formatter:function(value,rec){
return'<spanstyle="color:red">编辑删除</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true}
]],
pagination:true,
rownumbers:true,
singleSelect:false,
toolbar:[{
text:'添加',
iconCls:'icon-add',
handler:function(){
alert('添加数据')
}
},'-',{
text:'保存',
iconCls:'icon-save',
handler:function(){
alert('保存数据')
}
}]
});
});
</script>
</head>
<body>
<tableid="test"></table>
</body>
</html>
这里我们从datagrid_data.json中获取数据，代码的编写风格同EXTIS十分相似。ExtJS开发实践
效果：
jQuery EasyUI---Dialog
网页窗体效果。
基本代码：
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dialog</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
<script>
$(function(){
$('#dd').dialog({
toolbar:[{
text:'添加',
iconCls:'icon-add',
handler:function(){
alert('添加数据')
}
},'-',{
text:'保存',
iconCls:'icon-save',
handler:function(){
alert('保存数据')
}
}],
buttons:[{
text:'提交',
iconCls:'icon-ok',
handler:function(){
alert('提交数据');
}
},{
text:'取消',
handler:function(){
$('#dd').dialog('取消');
}
}]
});
});
</script>
</head>
<body>
<divid="dd"style="padding:5px;width:400px;height:200px;">
<p>jQueryEasyUI---Dialog</p>
</div>
</body>
</html>
<head>
<title>Dialog</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
<script>
$(function(){
$('#dd').dialog({
toolbar:[{
text:'添加',
iconCls:'icon-add',
handler:function(){
alert('添加数据')
}
},'-',{
text:'保存',
iconCls:'icon-save',
handler:function(){
alert('保存数据')
}
}],
buttons:[{
text:'提交',
iconCls:'icon-ok',
handler:function(){
alert('提交数据');
}
},{
text:'取消',
handler:function(){
$('#dd').dialog('取消');
}
}]
});
});
</script>
</head>
<body>
<divid="dd"style="padding:5px;width:400px;height:200px;">
<p>jQueryEasyUI---Dialog</p>
</div>
</body>
</html>
效果：
jQuery EasyUI---Tabs
无论是网站还是管理软件，我们越来越多的使用Tabs，EasyUI自然也进行了支持。
基本代码：
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<divid="tt"class="easyui-tabs"style="width:500px;height:250px;">
<divtitle="Tab1"style="padding:20px;display:none;">
<h1>Tab1Content</h1>
</div>
<divtitle="Tab5"closable="true"style="padding:10px;display:none;">
<divclass="easyui-tabs"fit="true"plain="true"style="height:100px;width:300px;">
<divtitle="Title1">Content1</div>
<divtitle="Title2">Content2</div>
<divtitle="Title3">Content3</div>
</div>
</div>
</div>
</body>
</html>
<head>
<title>Tabs</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<divid="tt"class="easyui-tabs"style="width:500px;height:250px;">
<divtitle="Tab1"style="padding:20px;display:none;">
<h1>Tab1Content</h1>
</div>
<divtitle="Tab5"closable="true"style="padding:10px;display:none;">
<divclass="easyui-tabs"fit="true"plain="true"style="height:100px;width:300px;">
<divtitle="Title1">Content1</div>
<divtitle="Title2">Content2</div>
<divtitle="Title3">Content3</div>
</div>
</div>
</div>
</body>
</html>
效果：
jQuery EasyUI---Messager
信息提示控件，可以很好的进行数据的提示，推荐。
基本代码：
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Messager</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
<script>
functionshow1(){
$.messager.show({
title:'提示信息1',
msg:'信息1',
showType:'show'
});
}
functionshow2(){
$.messager.show({
title:'提示信息2',
msg:'信息5分钟后消失.',
timeout:5000,
showType:'slide'
});
}
functionshow3(){
$.messager.show({
title:'渐进显示信息3',
msg:'渐进显示信息3',
timeout:0,
showType:'fade'
});
}
</script>
</head>
<body>
<h1>信息提示</h1>
<div>
<ahref="javascript:void(0)"onclick="show1()">显示</a>|
<ahref="#"onclick="show2()">滑动</a>|
<ahref="#"onclick="show3()">渐进显示</a>|
</div>
</body>
</html>
<head>
<title>Messager</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
<script>
functionshow1(){
$.messager.show({
title:'提示信息1',
msg:'信息1',
showType:'show'
});
}
functionshow2(){
$.messager.show({
title:'提示信息2',
msg:'信息5分钟后消失.',
timeout:5000,
showType:'slide'
});
}
functionshow3(){
$.messager.show({
title:'渐进显示信息3',
msg:'渐进显示信息3',
timeout:0,
showType:'fade'
});
}
</script>
</head>
<body>
<h1>信息提示</h1>
<div>
<ahref="javascript:void(0)"onclick="show1()">显示</a>|
<ahref="#"onclick="show2()">滑动</a>|
<ahref="#"onclick="show3()">渐进显示</a>|
</div>
</body>
</html>
效果：
页面左下角信息提示
jQuery EasyUI---ValidateBox
数据验证控件，可以很好的对表单数据进行验证。
基本代码：
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ValidateBox</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<div>
<table>
<tr>
<td>姓名:</td>
<td><inputclass="easyui-validatebox"required="true"validType="length[1,3]"></td>
</tr>
<tr>
<td>电子邮件:</td>
<td><inputclass="easyui-validatebox"required="true"validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><inputclass="easyui-validatebox"required="true"validType="url"></td>
</tr>
<tr>
<td>说明:</td>
<td><textareaclass="easyui-validatebox"required="true"style="height:100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
<head>
<title>ValidateBox</title>
<scriptsrc="../jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="../jquery.easyui.min.js"type="text/javascript"></script>
<linkhref="../themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<linkhref="../themes/icon.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<div>
<table>
<tr>
<td>姓名:</td>
<td><inputclass="easyui-validatebox"required="true"validType="length[1,3]"></td>
</tr>
<tr>
<td>电子邮件:</td>
<td><inputclass="easyui-validatebox"required="true"validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><inputclass="easyui-validatebox"required="true"validType="url"></td>
</tr>
<tr>
<td>说明:</td>
<td><textareaclass="easyui-validatebox"required="true"style="height:100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>