初試jQuery EasyUI 使用介紹

更新時(shí)間：2010年04月01日 23:48:44 作者：

想必關(guān)注jQuery的同學(xué)們對(duì)jQuery EasyUI已經(jīng)有所耳聞了，目前已經(jīng)更新到1.0.5版本，風(fēng)格與EXTJS有點(diǎn)相似，可以很好的滿足開(kāi)發(fā)人員對(duì)UI的需求。

jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標(biāo)就是幫助web開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開(kāi)發(fā)者不需要編寫復(fù)雜的javascript，也不需要對(duì)css樣式有深入的了解，開(kāi)發(fā)者需要了解的只有一些簡(jiǎn)單的html標(biāo)簽。

jQuery EasyUI為我們提供了大多數(shù)UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。

OK，下面就開(kāi)始我們的初探之旅。
jQuery EasyUI---Accordion
手風(fēng)琴效果，大家應(yīng)該很熟悉。
基本代碼：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Accordion</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"></script> 
</head> 
<body> 
<div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;"> 
<div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;"> 
<div title="Title1" style="overflow:auto;padding:10px;"> 
<h3>Accordion1</h3> 
</div> 
<div title="Title2" style="padding:10px;"> 
<h3>Accordion2</h3> 
</div> 
<div title="Title3"> 
<h3>Accordion3</h3> 
</div> 
</div> 
</div> 
</body> 
</html> 

代碼非常簡(jiǎn)單，只需要簡(jiǎn)單的html就可以實(shí)現(xiàn)。這里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。
效果：

由于只是簡(jiǎn)單的html，所以我們可以通過(guò)js輕松的對(duì)Accordion進(jìn)行操控，控制大小，位置等等。

jQuery EasyUI---DataGrid

從名字就可以知道這是個(gè)數(shù)據(jù)的綁定和顯示控件。

基本代碼：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>DataGrid</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(function() { 
$('#test').datagrid({ 
title: 'jQuery EasyUI---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 '<span style="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('添加數(shù)據(jù)') 
} 
}, '-', { 
text: '保存', 
iconCls: 'icon-save', 
handler: function() { 
alert('保存數(shù)據(jù)') 
} 
}] 
}); 
}); 
</script> 
</head> 
<body> 
<table id="test"></table> 
</body> 
</html> 

這里我們從datagrid_data.json中獲取數(shù)據(jù)，代碼的編寫風(fēng)格同EXTIS十分相似。ExtJS開(kāi)發(fā)實(shí)踐

效果：

jQuery EasyUI---Dialog
網(wǎng)頁(yè)窗體效果。
基本代碼：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Dialog</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
<script> 
$(function(){ 
$('#dd').dialog({ 
toolbar:[{ 
text:'添加', 
iconCls:'icon-add', 
handler:function(){ 
alert('添加數(shù)據(jù)') 
} 
},'-',{ 
text:'保存', 
iconCls:'icon-save', 
handler:function(){ 
alert('保存數(shù)據(jù)') 
} 
}], 
buttons:[{ 
text:'提交', 
iconCls:'icon-ok', 
handler:function(){ 
alert('提交數(shù)據(jù)'); 
} 
},{ 
text:'取消', 
handler:function(){ 
$('#dd').dialog('取消'); 
} 
}] 
}); 
}); 
</script> 
</head> 
<body> 
<div id="dd" style="padding:5px;width:400px;height:200px;"> 
<p>jQuery EasyUI---Dialog</p> 
</div> 
</body> 
</html> 

效果：

jQuery EasyUI---Tabs
無(wú)論是網(wǎng)站還是管理軟件，我們?cè)絹?lái)越多的使用Tabs，EasyUI自然也進(jìn)行了支持。
基本代碼：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Tabs</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
<div title="Tab1" style="padding:20px;display:none;"> 
<h1>Tab1 Content</h1> 
</div> 
<div title="Tab5" closable="true" style="padding:10px;display:none;"> 
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;"> 
<div title="Title1">Content 1</div> 
<div title="Title2">Content 2</div> 
<div title="Title3">Content 3</div> 
</div> 
</div> 
</div> 
</body> 
</html> 

效果：

jQuery EasyUI---Messager
信息提示控件，可以很好的進(jìn)行數(shù)據(jù)的提示，推薦。
基本代碼：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Messager</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
<script> 
function show1() { 
$.messager.show({ 
title: '提示信息1', 
msg: '信息1', 
showType: 'show' 
}); 
} 
function show2() { 
$.messager.show({ 
title: '提示信息2', 
msg: '信息5分鐘后消失.', 
timeout: 5000, 
showType: 'slide' 
}); 
} 
function show3() { 
$.messager.show({ 
title: '漸進(jìn)顯示信息3', 
msg: '漸進(jìn)顯示信息3', 
timeout: 0, 
showType: 'fade' 
}); 
} 
</script> 
</head> 
<body> 
<h1>信息提示</h1> 
<div> 
<a href="javascript:void(0)" onclick="show1()">顯示</a> | 
<a href="#" onclick="show2()">滑動(dòng)</a> | 
<a href="#" onclick="show3()">漸進(jìn)顯示</a> | 
</div> 
</body> 
</html> 

效果：

頁(yè)面左下角信息提示
jQuery EasyUI---ValidateBox
數(shù)據(jù)驗(yàn)證控件，可以很好的對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證。
基本代碼：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>ValidateBox</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div> 
<table> 
<tr> 
<td>姓名:</td> 
<td><input class="easyui-validatebox" required="true" validType="length[1,3]"></td> 
</tr> 
<tr> 
<td>電子郵件:</td> 
<td><input class="easyui-validatebox" required="true" validType="email"></td> 
</tr> 
<tr> 
<td>URL:</td> 
<td><input class="easyui-validatebox" required="true" validType="url"></td> 
</tr> 
<tr> 
<td>說(shuō)明:</td> 
<td><textarea class="easyui-validatebox" required="true" style="height:100px;"></textarea></td> 
</tr> 
</table> 
</div> 
</body> 
</html> 