這個功能看起來簡單，但如果深入探究就會發(fā)現(xiàn)很多邏輯問題。

 

問題1：點擊菜單，在主區(qū)域顯示該菜單對應的頁簽和頁面。

 

擴展1：如果該菜單對應的頁面未打開，則在新頁簽中打開頁面;

 

擴展2：如果該菜單對應的頁面已打開但未顯示，則在原頁簽中顯示頁面;

 

擴展3：如果該菜單對應的頁面已打開且已顯示，則不進行任何操作。

 

問題2：頁簽和頁面需要對應同步顯示。

 

問題3：當打開多個頁簽之后，點擊頁簽可以切換對應的頁面顯示。

 

問題4：當前顯示的頁面對應的頁簽需要突出顯示。

 

問題5：點擊頁簽上的關閉圖標可以同步關閉頁簽及對應的頁面。

 

擴展1：如果關閉的是當前顯示的頁面，關閉后顯示上一個打開的頁面;

 

擴展2：如果關閉的不是當前顯示的頁面，關閉后仍然顯示當前頁面。

 

2. 設計思路

 

這個功能整體包含三個部分：菜單部分、頁簽部分、顯示頁面的部分，我們來思考一下這三個部分分別用什么元件來實現(xiàn)。

 

針對菜單部分：可選的元件很多，在此不一一列舉，只要是能點擊的元件基本就可以，但使用不同元件的結果就是過程復雜程度不同以及靈活程度不同。但考慮到原型的通用性，不同情況下菜單項是不同的，于是考慮使用更為靈活的中繼器元件來做菜單。

 

針對頁簽部分：因為這一部分會涉及到頁簽的動態(tài)增減，所以毫不猶豫選擇中繼器。

 

針對顯示頁面的部分：由于要跟隨不同的菜單或頁簽來顯示不同的頁面，所以基本也是動態(tài)顯示，可以考慮的元件有三種方案，一是內聯(lián)框架，二是動態(tài)面板+內聯(lián)框架，三是中繼器+內聯(lián)框架，因為要顯示頁面，所以內聯(lián)框架是必不可少的。那這三種方案如何選擇呢?通過簡單對比，可以發(fā)現(xiàn)第三種方案比第一種方案適用范圍更廣，比第二種方案配置更加簡單，所以采用第三種方案。

 

那么三部分要使用的元件都確定之后，接下來就是在此思路的基礎上去實踐了。

 

本案例中三個部分，全部使用中繼器來實現(xiàn)，好處則是配置簡單，靈活度高，可復用性強。如果你嘗試了其他元件，你就會理解使用中繼器真的是一勞永逸。

 

以上就是網(wǎng)站建設后臺的多頁簽功能怎么使用之原型解析和設計思路。