JQuery EasyUi之界面設計——前言與界面效果（一）

若是馮鞏的開場白是「觀衆朋友們，我想死大家了」，那麼個人開場白是「最近一直很忙，好久沒有發文了」。

前面說過了EXT.NET，這裏順便再說說JQuery EasyUI。爲啥我會選擇JQuery EasyUI呢？主要有如下幾點：

1. 輕量級。

2. 基本的組件都用，即「麻雀雖小五臟俱全」。

3. 使用簡潔方便，好比支持html+js。

4. 可擴展性。

5. 可維護性。世上沒有完美的產品，並且其對IE6的兼容性還存在一些問題，但相比extjs，其仍是很方便閱讀和修改的。

6. 簡單性。這既是優勢也是缺點。好比icon，自帶的就那麼幾個，像我這樣的懶人，就用那麼幾個就夠了，extjs的圖標選擇起來都比較麻煩。若是實在不夠用，就去extjs裏面找幾個加上。再好比組件的使用，官方文檔的描述也就那麼幾頁，使用起來，也就那麼幾個方法與事件，但基本夠用了。

7. 我的不喜歡固步自封，喜愛使用對本身來講有點神祕和陌生的技術。

8. extjs如一個行動不便的美婦，其腳本太龐大，對象太豐富，而且不利於維護；ext.net如一個打扮得花枝招展的裹腳的婦女，其將extjs封裝成服務器控件，雖然其維護起來不錯，體驗不錯，使用方便，可是我不喜歡使用服務器控件的這種方式，也不喜歡其包了一層有一層的外殼，調起問題來從ASP.NET到EXT.NET到extjs；而easyui，則如一個清純的少女，從外表便可窺探心裏，清秀而不失美觀。

9. 其餘。

最近手上有個私活，因而就試試了。如今項目已經基本完工了。那麼我就來講說EasyUi這個系列吧。因爲時間有限，會分幾篇說（必定會說完），並且更新時間不會固定，敬請諒解。

在此以前，先說說編寫本系列的計劃吧：

1. JQuery EasyUi之界面設計——前言與界面效果（一）

2. JQuery EasyUi之界面設計——通用的JavaScript（二）

3. JQuery EasyUi之界面設計——母版頁以及Ajax的通用處理（三）

4. JQuery EasyUi之界面設計——代碼詳解（四）

下面先從界面效果開始吧。

首頁

首頁的樣式是扒的官網DEMO，可是與其不一樣的是，其右側是一個框架，我這裏的右側換成了一個tab，對於管理系統來講，使用tab更方便。

內容展示頁面

上面的按鈕時類型，使用的是linkbutton實現的特效。下面區域使用的是datagrid，查詢放在頂部工具欄。

彈出窗口

彈出窗口能夠用於新增|編輯，也能夠用於其餘功能，這個效果與extjs的window差很少。

新增與編輯

easyui的form自帶驗證、提交、重置與賦值，使用起來簡單方便。

提示框