如果馮鞏的開場白是“觀眾朋友們,我想死你們了”,那么我的開場白是“最近一直很忙,很久沒有發文了”。
前面說過了EXT.NET,這里順便再說說JQuery EasyUI。為啥我會選擇JQuery EasyUI呢?主要有以下幾點:
- 輕量級。
- 基本的組件都用,即“麻雀雖小五臟俱全”。
- 使用簡潔方便,比如支持html+js。
- 可擴展性。
- 可維護性。世上沒有完美的產品,而且其對IE6的兼容性還存在一些問題,但相比extjs,其還是很方便閱讀和修改的。
- 簡單性。這既是優點也是缺點。比如icon,自帶的就那么幾個,像我這樣的懶人,就用那么幾個就夠了,extjs的圖標選擇起來都比較麻煩。如果實在不夠用,就去extjs里面找幾個加上。再比如組件的使用,官方文檔的描述也就那么幾頁,使用起來,也就那么幾個方法與事件,但基本夠用了。
- 個人不喜歡固步自封,喜好使用對自己來說有點神秘和陌生的技術。
- extjs如一個行動不便的美婦,其腳本太龐大,對象太豐富,並且不利於維護;ext.net如一個打扮得花枝招展的裹腳的婦女,其將extjs封裝成服務器控件,雖然其維護起來不錯,體驗不錯,使用方便,但是我不喜歡使用服務器控件的這種方式,也不喜歡其包了一層有一層的外殼,調起問題來從ASP.NET到EXT.NET到extjs;而easyui,則如一個清純的少女,從外表即可窺探內心,清秀而不失美觀。
- 其他。
最近手上有個私活,於是就試試了。現在項目已經基本完工了。那么我就來說說EasyUi這個系列吧。由於時間有限,會分幾篇說(一定會說完),而且更新時間不會固定,敬請諒解。
在此之前,先說說編寫本系列的計划吧:
- JQuery EasyUi之界面設計——前言與界面效果(一)
- JQuery EasyUi之界面設計——通用的JavaScript(二)
- JQuery EasyUi之界面設計——母版頁以及Ajax的通用處理(三)
- JQuery EasyUi之界面設計——代碼詳解(四)
下面先從界面效果開始吧。
首頁
首頁的樣式是扒的官網DEMO,但是與其不同的是,其右側是一個框架,我這里的右側換成了一個tab,對於管理系統來說,使用tab更方便。
內容展現頁面
上面的按鈕時類型,使用的是linkbutton實現的特效。下面區域使用的是datagrid,查詢放在頂部工具欄。
彈出窗口
彈出窗口可以用於新增|編輯,也可以用於其他功能,這個效果與extjs的window差不多。
新增與編輯
easyui的form自帶驗證、提交、重置與賦值,使用起來簡單方便。