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

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

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

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

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

頁面效果

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

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

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

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

右側(cè)面板——聯(lián)系人或其他信息。

中央?yún)^(qū)域——工作臺。主要用于日常工作維護以及快捷操作。

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

左側(cè)面板

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

當點擊子節(jié)點，會顯示在Tab頁中。

這樣，用戶可以方便的實現(xiàn)操作。

中央?yún)^(qū)域

中央?yún)^(qū)域主要用于日常工作維護以及快捷操作。當然快捷操作你也可以放在頂部面板。

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

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

就拿待處理事務來說：

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

?

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

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

最后

?

?

?

?

?

?

?

?

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

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

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

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/codelove/archive/2011/12/30/2308125.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。