# Top 5 jQuery UI Alternatives
它主要是利用 HTML5 技術來為 jQuery 提供簡易快速的 UI 介面, 我覺得是不錯的 jQueryUI 替代方案. 其官網, 範例以及下載連結如下 :
# jQuery EasyUI 官網
# jQuery EasyUI 範例
jQuery EasyUI 基本上是個商用軟體, 但提供 GPL 版本免費使用, 可從這裡下載 :
# jQuery EasyUI 下載 (GPL 版本)
目前是 1.4 版, 下載解開後目錄結構如下 :
專案中會用到的只有 jquery.min.js, jquery.easyui.min.js, 與 locale 目錄下的 easyui-lang-zh_TW (繁體中文化) 這三個檔案, 以及 themes 這個目錄即可. 但我 PHP 測試網站已經有 jQuery UI 的測試環境, 所以我只要複製 jquery.easyui.min.js 與 themes 目錄到我的網站的 jquery 目錄下即可. 因為 jQuery UI 已經有一個 themes 目錄在那裡, 為了區別, 所以我先把 EasyUI 的 themes 目錄改名為 easyui-themes 再壓縮上傳伺服器後解壓縮. 最後自備的 jquery 目錄下是長這樣 (圈選起來的是屬於 EasyUI 的, 其餘則是以前測試 jQueryUI 的) :
經過這樣配置, 我原先測試 jQueryUI 的伺服器環境就可以同時測試 EasyUI 了. 下面就以解壓縮目錄下的 demo/datagrid/basic.html 這個檔來測試一下是否配置無誤. 打開此檔可以發現於 head 中需指定下列資源檔 :
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
這邊我們要根據環境配置修改 href 的相對路徑, 我的網站路徑配置如下 :
root
|__ jquery
| |__ jquery.js
| |__ jquery.easyui.min.js
| |__ easyui-lang-zh_TW.js
| |__ easyui-themes
|__ jquerytest
|__ easyui-datagrid-1.htm
所以 JS 與 CSS 資源的相對路徑要改為如下 :
<link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/icon.css">
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery/easyui-lang-zh_TW.js"></script>
接下來看 basic.html 中的 HTML5 表格內容, 其中 table 標籤的 data-options 屬性中的 url 是用來指定表格的 AJAX 資料來源, method 用來指定 HTTP 方法, 如下所示 :
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.josn',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
我們將原始的 basic.html 經上述修改後存成 easyui-datagrid-1.htm, 但是這個網頁檔在本機執行時只會顯示表格標題, 無法顯示表格內容, 必須將 datagrid_data1.json 這個資料來源檔案也上傳到伺服器才行, 其內容結構如下 :
{"total":28,"rows":[
{"productid":"FI-SW-01",
"productname":"Koi",
"unitcost":10.00,
"status":"P",
"listprice":36.50,
"attr1":"Large",
"itemid":"EST-1"},
...
]}
可見需有 total (總筆數) 與 rows (列資料) 兩個屬性, 列資料是一個物件陣列, 每一個物件實體是欄位名稱與欄位值的對應.
範例 1 : http://mybidrobot.allalla.com/easyuitest/easyui-datagrid-1.htm [看原始碼]
當然, 實際應用上是由後端程式如 PHP 等產生輸出資料, 這時只要將 table 標籤的 data-options 屬性裡的 url 改為 .php 程式即可.
第二種環境配置就是直接使用 EasyUI 官網的檔案, 放在 http://www.jeasyui.com/easyui/ 目錄下, 只要依照下載 zip 檔解壓縮後的目錄結構按圖索驥即可找到, 所以上述之資源指定要改為 :
JS 與 CSS 資源的相對路徑要改為如下 :
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/locale/easyui-lang-zh_TW.js"></script>
如下列範例 2 所示 :
範例 2 : http://mybidrobot.allalla.com/easyuitest/easyui-settings-cdn.htm [看原始碼]
效果是一樣的, 好處是不必自己準備資源檔.
參考資料 :
# zTree-jQuery tree plug-ins
