使用Jquery easyui

Jquery easyui可以幫助我們快速的創建頁面，它本身包含了很豐富的組件。 不過，這是一個後臺前端的解決方案。與Jquery UI齊名的有bootstrap。前端前端，還是離不開javascript和css。

首先，需要下載jquery easy UI的相關包，可以到easy UI的官網上去下載（下載地址：點擊打開鏈接）。

官方的下載包，是一個壓縮文件，解壓後可以得到很多文件夾，以下文件夾是比較重要的：

locale：國際化的js腳本，會根據瀏覽器設置，選擇具體的顯示語言，如果你想要jquery easy UI支持中文，至少要把locale文件夾中的easyui-lang-zh_CN.js文件加入到你的項目中。

themes：主題所在文件夾，裏面包含了多個主題，一個主題是一個文件夾，裏面主要是css文件。

要在項目中使用easy UI，需要引入以下的四個文件：icon.css、jquery-1.9.1.js、jquery.easyui.min.js、easyui-lang-zh_CN.js。此外，還需要至少一個theme文件下的easyui.css文件和icons文件夾，至於選哪個其實不是太大問題，只是顯示的風格有所迥異而已。

下面來講講這5個文件都是幹什麼的：

easyui.css

定義了所有組件的大體樣式。

icon.css

定義了所有的圖標，無論選擇哪一種主題，圖標都是一樣的，因爲圖標是其實就是一個小圖片，它這些小圖標存放在themes目錄下的icons文件中，如果你發現使用圖標沒有效果，那就是沒有把這個文件夾拷貝到項目中

jquery-1.9.1.js

jquery的核心支持文件。

jquery.easyui.min.js

easyui的組件的js腳本。

easyui-lang-zh_CN.js

國際化中顯示中文腳本，需要注意，在引入這個腳本的時候需要指定編碼集爲gbk，否則會出現中文亂碼。

	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="js/jquery-1.9.1.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/easyui-lang-zh_CN.js" charset="GBK"></script>

爲了簡便，我們把它寫到一個js腳本中import.js

document.write('<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">');
document.write('<link rel="stylesheet" type="text/css" href="themes/icon.css">');
document.write('<script type="text/javascript" src="js/jquery-1.9.1.js"></script>');
document.write('<script type="text/javascript" src="js/jquery.easyui.min.js"></script>');
document.write('<script type="text/javascript" src="js/easyui-lang-zh_CN.js" charset="GBK"></script>');

這樣，只需要導入import.js腳本到頁面中就可以使用jquery easyui了。