jQuery EasyUI的使用入門

標籤：屬性   國際化   layout   入門   還需要   檔案夾   ons   pre   type   

jQuery EasyUI不是什麼太進階的東西，就是用jQuery寫了很多方法、定義了很多屬性，通過調用這些方法、屬性，可以達到一些特定的效果，然後我們再根據具體需求微調就好了。至少需要匯入兩個樣式表和兩個js檔案：

<link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css" /><link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/icon.css" /><script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

上面是把jquery-easyui-1.5.1解壓縮後的檔案夾直接複製到webapp中而形成的路徑，最終的路徑可能根據開發時的資源配置情況而調整，但是檔案是固定的，就是那幾個檔案，必須要匯入，而且匯入js檔案時，必須先匯入jquery檔案，因為jquery.easyui.min.js檔案使用jQuery的方法寫的。

如果涉及到語言問題，可能還需要匯入一個國際化的js檔案，在jquery-easyui-1.5.1/locale中，如果想用中文，就是easyui-lang-zh_CN.js檔案，想用英文，就是easyui-lang-en.js檔案。

通過視頻，學習了基礎部分的draggable(拖動)、pagination(分頁)，布局部分的panel(面板)、tabs(選項卡)、layout(布局)，菜單和按鈕部分的linkbutton(按鈕)、表單部分的form(表單)、視窗部分的window(視窗)、dialog(對話方塊視窗)、messager(訊息視窗)，表格和樹部分的datagrid(資料表格)、tree(樹)。當然，實際開發中也可能用到其他的組件。

jQuery EasyUI用法非常簡單，當用某個組件時，只需把class設為相對應的以easyui開頭的值，然後通過data-options來設定屬性，或者通過一些可選的方法來操作即可。看著API文檔開發是最快的，不用記具體屬性和方法名，記住規律就行，因為具體屬性名稱和方法名實在是太多了。

jQuery EasyUI的使用入門