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

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

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

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

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

頁面效果

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

從圖中可以看出，首頁分4塊區域（四大板塊）：

頂部面板——LOGO、用戶信息、幫助、反饋、通知等。

左側面板——組織機構（通常放功能菜單）。

右側面板——聯系人或其他信息。

中央區域——工作臺。主要用于日常工作維護以及快捷操作。

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

左側面板

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

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

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

中央區域

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

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

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

就拿待處理事務來說：

通過工具欄按鈕，可以方便對事務進行操作（別忘了判斷權限）。如點擊退回操作：

?

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

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

最后

?

?

?

?

?

?

?

?

整個頁面是自適應的，會隨著瀏覽窗口大小自適應，如：

點子頁面彈出表單可以最大化，如：

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

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

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

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

轉載于:https://www.cnblogs.com/codelove/archive/2011/12/30/2308125.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的EXT.NET复杂布局（四）——系统首页设计（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。