jQuery EasyUI快速入門實戰教程（一）-入門
1、jQuery EasyUI概述
jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富並且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要對css樣式有深入的了解，開發者需要了解的只有一些簡單的html標簽。jQuery EasyUI是基於JQuery的一個前臺ui界面的插件，功能相對沒extjs強大，但頁面也是相當好看的，同時頁面支持各種themes以滿足使用者對於頁面不同風格的喜好。一些功能也足夠開發者使用，相對於extjs更輕量。
jQuery EasyUI的官網地址為：http://www.jeasyui.com/
jQuery EasyUI的特點：
easyui是一種基於jQuery的用戶界面插件集合
easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面
easyui是個完美支持HTML5網頁的完整框架
easyui節省您網頁開發的時間和規模
easyui很簡單但功能強大
2、jQuery EasyUI的目錄結構
demo：easyui的各個組件使用示例
demo-mobile：easyui在移動終端上各個組件使用示例
locale：是國際化支持文件夾
src：是部分easyui插件的源碼
plugins：是easyui使用的插件
themes：easyui基礎自帶的主題
jQuery EasyUI的安裝只需要下載解壓後；將需要使用的js和css引入頁面即可。一般需要引入的文件包括：
themes/default/easyui.css
themes/icon.css
jquery.min.js
jquery.easyui.min.js
locale/easyui-lang-zh_CN.js
3、jQuery EasyUI的開發步驟
1.在JSP頁面導入EasyUI所需的css和js資源
拷貝以上文件到項目
<!-- 1.導入css文件 --> <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"> <!-- 2.導入js文件 --> <script type="text/javascript" src="../easyui/jquery.min.js"></script> <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
2.設計一個div，添加EasyUI的class
<div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:‘Hello EasyUI‘,collapsible:true,iconCls:‘icon-ok‘,onOpen:function(){}">
this is content!!!
</div>3.最終效果
瀏覽器訪問頁面，效果如下：
PS，本教程配套視頻：
http://edu.51cto.com/course/10138.html
本文章首發於個人博客（http://www.xushifeng.net）,如需轉載，請聯系作者。
本文出自 “神碼小風的博客” 博客，轉載請與作者聯系！
jQuery EasyUI快速入門實戰教程（一）-入門