初試jQuery EasyUI 使用介紹
jQuery EasyUI是一組基于jQuery的UI插件集合,而jQuery EasyUI的目標就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開發(fā)者不需要編寫復(fù)雜的javascript,也不需要對css樣式有深入的了解,開發(fā)者需要了解的只有一些簡單的html標簽。
jQuery EasyUI為我們提供了大多數(shù)UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,window等等。
OK,下面就開始我們的初探之旅。
jQuery EasyUI---Accordion
手風(fēng)琴效果,大家應(yīng)該很熟悉。
基本代碼:
<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>
代碼非常簡單,只需要簡單的html就可以實現(xiàn)。這里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。
效果:

由于只是簡單的html,所以我們可以通過js輕松的對Accordion進行操控,控制大小,位置等等。
jQuery EasyUI---DataGrid
從名字就可以知道這是個數(shù)據(jù)的綁定和顯示控件。
基本代碼:
<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開發(fā)實踐
效果:

jQuery EasyUI---Dialog
網(wǎng)頁窗體效果。
基本代碼:
<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ǎng)站還是管理軟件,我們越來越多的使用Tabs,EasyUI自然也進行了支持。
基本代碼:
<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
信息提示控件,可以很好的進行數(shù)據(jù)的提示,推薦。
基本代碼:
<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: '漸進顯示信息3',
msg: '漸進顯示信息3',
timeout: 0,
showType: 'fade'
});
}
</script>
</head>
<body>
<h1>信息提示</h1>
<div>
<a href="javascript:void(0)" onclick="show1()">顯示</a> |
<a href="#" onclick="show2()">滑動</a> |
<a href="#" onclick="show3()">漸進顯示</a> |
</div>
</body>
</html>
效果:

頁面左下角信息提示
jQuery EasyUI---ValidateBox
數(shù)據(jù)驗證控件,可以很好的對表單數(shù)據(jù)進行驗證。
基本代碼:
<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>說明:</td>
<td><textarea class="easyui-validatebox" required="true" style="height:100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
不需要寫任何函數(shù),只需對要驗證的控件required="true" validType="url"就可以。
效果:

jQuery EasyUI---LayOut
頁面布局,可以將整個頁面劃分成幾個區(qū)域。類似ExtJS中的Border布局。
基本代碼:
效果:

jQuery EasyUI---換膚
jQuery EasyUI使用了統(tǒng)一的CSS樣式,在修改方面也很是方便:

如圖所示,對于每一個控件,都有專有的CSS。相應(yīng)對其修改就可以,只需簡單的了解CSS即可。
小結(jié):jQuery EasyUI的體驗就到這里,還有一些控件這里沒有介紹,比如:combobox,splitbutton等等。
官方網(wǎng)站:http://jquery-easyui.wikidot.com/start
下載地址:http://jquery-easyui.wikidot.com/download
本文代碼打包下載
文章作者:高維鵬(Brian)
相關(guān)文章
Jquery+AJAX實現(xiàn)無刷新上傳并重命名文件操作示例【PHP后臺接收】
這篇文章主要介紹了Jquery+AJAX實現(xiàn)無刷新上傳并重命名文件操作,結(jié)合實例形式分析了jQuery+ajax前臺上傳文件與PHP后臺接收處理相關(guān)操作技巧,需要的朋友可以參考下2020-05-05jQuery 頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部
這篇文章主要介紹了通過jQuery實現(xiàn)的頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部,需要的朋友可以參考下2014-06-06使用jQuery模板來展現(xiàn)json數(shù)據(jù)的代碼
通常我們在使用ajax的時候,都避免不了和json這種輕巧的數(shù)據(jù)格式打交道??墒峭謩拥娜ソ馕鰆son,構(gòu)建HTML,比較麻煩?,F(xiàn)在有了這個插件,就能像Extjs那樣使用模板解析json了。2010-10-10jquery 取子節(jié)點及當(dāng)前節(jié)點屬性值
本節(jié)主要介紹了jquery如何取子節(jié)點及當(dāng)前節(jié)點屬性值,需要的朋友可以參考下2014-07-07jQuery用FormData實現(xiàn)文件上傳的方法
眾所周知文件上傳是Web開發(fā)中的重要話題,最直接和簡單的方式是通過表單直接提交文件。 下面這篇文章小編就來和大家分享jQuery利用FormData實現(xiàn)文件上傳的方法,文中介紹的方法簡單易懂,相信對大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11JQuery獲取當(dāng)前屏幕的高度寬度的實現(xiàn)代碼
JQuery獲取瀏覽器窗口寬高,文檔寬高的代碼,使用jquery的朋友可以參考下。2011-07-07JQuery獲取元素文檔大小、偏移和位置和滾動條位置的方法集合
在ajax中經(jīng)常需要對元素的位置進行精確的定位,此時不僅需要獲取元素自身的大小位置等屬性。還需要知道頁面、瀏覽器、滾動條等的長度和寬度。2010-01-01