<a href="#" class="easyui-linkbutton">搜尋</a>
1
其中easyui-linkbutton，不就在CSS裡面定義了一個.easyui-linkbutton的樣式麼，貓哥也可以開發一個CatBrother的前端架構，全部源碼就一句：
.CatBrother{
color:#F01400;/*一種美麗的紅色*/
}
貓哥這個前端架構就封裝了一個功能：class=CatBrother的網頁内容将擁有一種美麗的紅色，因為功能過度簡單，是以貓哥這個架構沒有像EasyUI和Bootstrap那麼流行，實在是遺憾！
好的，從上面所說我們也就了解了，EasyUI前端架構其實也就是别人封裝好了CSS和JS代碼，我們直接用就行了。就像我們可以通過添加jar包的方式引入一些Java類一樣，我們可以通過<link>和<script>标簽，在網頁中添加對CSS和JS庫的引用。具體過程如下：
第一步，首先是下載下傳，登入下載下傳官網：EasyUI下載下傳，點選Freeware Edition下面的Download下載下傳即可（貓哥下載下傳的是1.5.1版本，以此版本為準進行示範，說實話我也沒用過1.5.1，之前用的還是老版本的，不過程式員要一直更新自己的知識庫，千萬不要執着于熟悉的舊版，要争當時代的弄潮兒，哈哈哈）。
第二步，解壓後，建立檔案夾easyui，将壓縮包在easyui檔案夾下解壓。哈哈，如果直接解壓出來一大堆東西，就有點亂了。
第三步，分析下解壓出來的東西，分析如下：
demo：肯定是放案例的了，有些同學習慣于百度找部落格，其實案例才是經典
demo-mobile：估計是放手機端的案例，這個牛X啊，看來easyui可以用于手機端，看來本系列之後要單開一個手機端的系列了。
locale:國際化與本地化，就是什麼中文啊、英文啊、日文啊那一套。
plugins:插件，一些複雜的功能可能需要插件，EasyUI估計是選了一些做的很好的插件直接內建到官方包裡了。
src:應該是源代碼，大神常用，修改修改，更符合需求
themes:主題，看來EasyUI應該也不是千篇一律的外觀，可以有主題設計
最後還有幾個js檔案，關鍵字easyui、jquery之類的，因為easyui是基于jquery的，是以要先引入jquery.js，再引入easyui.js，而min表示壓縮版的js檔案，這種js檔案比較短小精悍，可以節省流量加快速度。
第四步，我們還是使用MyEclipse建立一個web project，名字叫EasyuiDemo好了，然後将easyui檔案夾整個拷貝到Webroot下，如圖:
至于js那個錯，我們打開jquery.min.js檔案，滑鼠指到錯誤上提示：Missing semicolon，這句話的意思是丢失分号。貓哥猜測應該是我們使用了精簡版本的js檔案導緻精簡的連分号都沒有了，沒辦法，我們隻好選中js檔案，右鍵選擇MyEclipse，然後選擇Exclude from validation，也就是關閉對這個檔案的檢查，強制不報錯，就行了。（人家本來就是沒有錯）。
第六步，好了，終于可以開始使用easyui了，打開預設的index.jsp檔案，編輯如下，一定要注意的是，引用了這四個檔案，我們就可以暢快的使用EasyUI了。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.jsp</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
This is my JSP page. <br>
</body>
</html>
第七步，我們來做一個簡單的測試，将開頭說的
<a href="#" class="easyui-linkbutton" >搜尋</a>
，放入body中:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.jsp</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
This is my JSP page. <br>
<a href="#" class="easyui-linkbutton">搜尋</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">Search</a>
</body>
</html>
在浏覽器中浏覽如下：
可見定義的樣式已然生效，效果也算不錯，是以如果比較了解前端架構的話，有時候看到别人做的網站，便是會心一笑——你小子，EasyUI做的啊，不錯啊。