EXT.NET復雜布局(四)——系統首頁設計(上)


很久沒有發帖了,很是慚愧,因此給各位使用EXT.NET的朋友獻上一份禮物。

本篇主要講述頁面設計與效果,下篇將講述編碼並提供源碼下載。

系統首頁設計往往是個難點,因為往往要考慮以下因素:

  • 重要通知
  • 系統功能菜單
  • 快捷操作
  • 日常維護工作(比如待辦事項、已辦事項等等)
  • 用戶信息(比如公司、部門、組織機構)
  • 系統信息(意見反饋、幫助等)
  • 聯系溝通
  • 等等

又要兼顧美觀得體(丑了客戶不願意用,更別說錢了),方便實用,怎么從有限的空間里顯示更多的功能(陣地戰),往往弄得抓耳搔頭,大費腦細胞。下面就給出我的方案。

頁面效果

我申明下,我不是專業的前端工程師,我就是一打雜的(啥都搞下),所以不要期望過高,如果還過得去,請點推薦。不多說了,上圖:

image

111

從圖中可以看出,首頁分4塊區域(四大板塊):

  1. 頂部面板——LOGO、用戶信息、幫助、反饋、通知等。
  2. 左側面板——組織機構(通常放功能菜單)。
  3. 右側面板——聯系人或其他信息。
  4. 中央區域——工作台。主要用於日常工作維護以及快捷操作。

頂部面包和右側面板沒啥好說的。接下來就說說功能吧。

左側面板

左側面板其實是相當重要的一塊,在平常系統設計中,往往把功能菜單放在左側。這里類似。不僅支持分組折疊,還支持無限極子菜單,美觀而靈活。

image

當點擊子節點,會顯示在Tab頁中。

image

這樣,用戶可以方便的實現操作。

中央區域

中央區域主要用於日常工作維護以及快捷操作。當然快捷操作你也可以放在頂部面板。

image

這個面板主要包括待處理事務、一般事務、通知、部門討論區、部門文檔等內容,當然我這是舉例。

整個工作台布局也是采用折疊面板,不過當展開某個面板時,會刷新數據。默認加載,並不需要加載所有數據。

就拿待處理事務來說:

image

通過工具欄按鈕,可以方便對事務進行操作(別忘了判斷權限)。如點擊退回操作:

image 

通過數據行中的操作列按鈕,可以方便查看表單內容,當表單關閉時,刷新工作台。

總之,只會顯示一個操作面板。

image

最后

 

 

 

 

 

 

 

 

整個頁面是自適應的,會隨着瀏覽窗口大小自適應,如:

image

點子頁面彈出表單可以最大化,如:

image

當你點擊表單里面的提交按鈕(假設存在),提交完后,可以關閉表單,父頁面也可以觸發操作,如關閉彈出的表單時:

image

先寫到這里吧,下篇再細談。到時奉上DEMO。

由於加群的人太多,EXT.NET群已滿。由於現在是業余弄弄EXT.NET,所以本人也不會過多與大家交流EXT.NET,還寫一篇,作為結尾好了。

這幾天有空的話,盡量完善這個DEMO吧。


免責聲明!

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



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