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

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

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

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

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

頁面效果

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

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

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

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

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

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

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

左側(cè)面板

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

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

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

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

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

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

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

就拿待處理事務(wù)來說：

通過工具欄按鈕，可以方便對事務(wù)進(jìn)行操作（別忘了判斷權(quán)限）。如點擊退回操作：

?

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

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

最后

?

?

?

?

?

?

?

?

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

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

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

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

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

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

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

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

總結(jié)

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

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