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之界面設計——代碼詳解(四)

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

首頁

image

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

內容展現頁面

image

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

彈出窗口

image

彈出窗口可以用於新增|編輯,也可以用於其他功能,這個效果與extjs的window差不多。

新增與編輯

image

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

提示框

imageimage

image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM