中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

很多網站后臺或者B/S結構的應用系統，經常會有這樣的功能：左側是導航菜單，點擊菜單后會在右側主區域以頁簽（也可稱為選項卡）的形式打開頁面，然后再點擊第二個個菜單，右側主區域會打開第二個頁簽來顯示頁面。如果對這個功能不太熟悉的話，可以去看一下Web版的郵箱系統（比如什么浪什么易之類的）。那今天分享的案例就是教大家使用中繼器與內聯框架實現網站后臺的多頁簽功能。

1、原型解析

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

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

• 擴展1：如果該菜單對應的頁面未打開，則在新頁簽中打開頁面；
• 擴展2：如果該菜單對應的頁面已打開但未顯示，則在原頁簽中顯示頁面；
• 擴展3：如果該菜單對應的頁面已打開且已顯示，則不進行任何操作。

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

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

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

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

• 擴展1：如果關閉的是當前顯示的頁面，關閉后顯示上一個打開的頁面；
• 擴展2：如果關閉的不是當前顯示的頁面，關閉后仍然顯示當前頁面。

2. 設計思路

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

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

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

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

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

3. 制作過程

3.1 準備三個中繼器

在畫布上拖入三個中繼器，分別命名為“菜單”、“頁簽”、“頁面”，并參照下面步驟進行設置。

（1）設置“菜單”中繼器

設置中繼器的列為“id”（其值需要具有唯一性），“menu”（存儲菜單名稱）和“url”（存儲菜單指向的頁面鏈接）并添加一些自定義數據，中繼器中自帶的“矩形”元件樣式請自行設置。修改中繼器的“每項加載時”用例。

（2）設置“頁簽”中繼器

設置中繼器的列為“id”和“menu”，并清空自帶的數據，中繼器中自帶的“矩形”元件樣式請自行設置，修改中繼器的“每項加載時”用例。

（3）設置“頁面”中繼器

設置中繼器的列為“id”，“url”和“sort”（存儲排序序號），清空自帶數據，保留一個空白行（或在url中定義一個初始頁面），刪除中繼器中的矩形，并拖入一個內聯框架，修改中繼器的“每項加載時”用例，修改中繼器的分頁樣式（多頁顯示，每頁項目數1）。

3.2 實現點擊菜單打開頁簽及頁面

回到“菜單”中繼器中，在“矩形”元件上設置“鼠標單擊時”用例，分別向中繼器“頁簽”和“頁面”中插入一行數據?！绊摵灐敝欣^器中插入的是當前菜單的“id”和“menu”，以便新增的頁簽可以顯示菜單的名稱，“頁面”中繼器中插入的是當前菜單的“id”和“url”，以便新增的頁面可以在其內聯框架中顯示菜單對應的頁面。

這時候我們可以預覽一下原型，當你點擊菜單時，你會發現：頁簽不斷向后增加，而頁面并沒有顯示（或者只顯示了第一個菜單對應的頁簽，之后的就不再顯示），沒關系，我們現在總結一下原型存在的問題，然后在接下來的步驟中逐一解決。

其實這里會出現很多問題，有簡單有復雜，這里我根據問題的優先級先拿出三個來解決，因為解決了這三個問題，我們的原型在要求比較低的情況下可以到此為止了，已經能夠滿足基本的演示。那這三個問題就是：

• 問題①：頁面不能正常顯示
• 問題②：我希望點擊已打開的頁簽時，實現頁簽及頁面的切換
• 問題③：我希望當前打開的頁簽可以突出顯示

3.3 解決頁面不能正常顯示的問題

熟悉中繼器的朋友這時候應該馬上就能知道頁面不能正常顯示的原因，因為我們在前面設置中繼器的時候，配置了中繼器的分頁屬性，即每頁顯示一個項目，而我們在點擊菜單的時候，每點擊一次就會像中繼器中增加一個項目，但是增加的項目默認是排在后面的，也就是排在了第2頁，第3頁，第N頁。所以我們只能看到第一個菜單的頁面，之后點擊的菜單的頁面就看不到。

明白了問題的原因就容易解決了，我們只需要將后點擊的菜單插入的項目排列在最前面就可以了，那這里就用到了中繼器的排序功能，跟著下面的步驟繼續操作。

首先添加一個全局變量“sort”（或將默認的全局變量名修改為“sort”），然后修改菜單的“鼠標單擊時”事件。在點擊菜單的時候，給sort值+1，給“頁面”中繼器增行的時候，設置sort值等于新的全局變量sort值。這樣做就可以使得每次打開的頁面的sort值都比上一個大1，然后利用中繼器的排序功能就可以將最后打開的頁面排在最前面。

然后我們再給中中繼器“頁面”添加排序功能，排序動作可以在中繼器“載入時”來執行。

這時候再來預覽，我們可以發現無論如何點擊菜單，頁面都可以正常顯示了，上面的問題①解決。接下來再解決問題②。

3.4 點擊頁簽切換頁面

這個問題比較容易解決，根據上一步中頁面的顯示邏輯，點擊頁簽的時候，只需要更新一下“頁面”中繼器中的sort值即可（在最新的全局變量sort值的基礎上+1）。

3.5 最新打開的頁簽突出顯示

突出顯示的樣式我們可以設置頁簽中形狀的“選中”樣式來實現，如果是當前點擊的菜單對應的頁簽，就將其設置為選中，以激活其選中樣式。那么問題來了，什么時候設置頁簽中形狀的選中呢？又如何知道該設置那個頁簽的？

這個問題可簡單可復雜，簡單的情況就是，我們只考慮點擊菜單或者點擊頁簽切換顯示的時候，點擊哪個菜單或頁簽，對應的頁簽就選中，只要通過菜單和頁簽的id進行判斷就可以。但是，還有一種復雜的情況要考慮，那就是，如果關閉了一個選中狀態的頁簽該怎么辦呢？剩余的頁簽該讓誰處于選中狀態呢？顯然前面的解決方案是沒有辦法解決這一問題的，我們還需要從長計議。

尋找這個問題的解決方案時，讓我走了不少彎路，嘗試了N種方式，有的根本行不通，有的表面行得通但時不時的會出現失靈的情況，不過幸運的是，最終還是找到了一種完美的解決方案。方案如下：

首先，點擊菜單或者頁簽時，以此記錄其id形成id串，比如[id1][id2][id3][id4]這樣，但根據后面的實踐經驗得知，記錄的順序需要按照從后往前的順序，即最新點擊的菜單或頁簽的id放在最前面。

然后，在“頁簽”中繼器的每項加載時，判斷當前頁簽的id是否等于id串最前面的那個id，如果是就選中，如果不是就不做任何操作。如果最前面的id被刪除了（關閉頁簽的時候），那么第2個id（也就是上個頁簽）就變成了最前的，從而也解決了關閉頁簽時，可以使上一個頁簽突出顯示的問題。

具體到原型中，需要創建兩個全局變量“id”和“ids”，id用來記錄當前id，ids用來記錄id串，然后在菜單和頁簽的“鼠標單擊時”事件中增加更新ids的動作。最后在“頁簽”中繼器的每項加載時執行判斷并設置選中。

菜單的“鼠標單擊時”用例：

頁簽的“鼠標單擊時”用例：

頁簽的“每項加載時”用例：if “[[ids.indexOf(Item.id)]]”==”0″的意思就是當前id在ids中的位置是0（0代表第一位），設置選中效果。

此時還需要添加一個Case2，即使上面條件不成立，我們依然需要在頁簽上顯示菜單名稱。

這時候我們來預覽一下頁面，是不是頁簽的選中效果已經出來了，但是竟然還有一個問題，就是切換頁簽的時候，頁簽的選中效果并沒有在頁簽之間切換，這是為什么呢？這是因為“頁簽”中繼器沒有刷新（也就是沒有重新加載），我們需要在每次點擊頁簽時，讓其重新加載一下，實現方式就是給“頁簽”中繼器增加一個更新操作（不需要跟新任何數據，只添加這樣一個動作就可以）。

這次再預覽，切換頁簽的時候，選中效果也隨之切換了。到目前為止，此原型已經基本可以拿去演示了，但是如果想要精益求精，不想讓原型存在一些很明顯的BUG，那么我們還要繼續完善，進一步解決原型存在的問題：

問題④：重復點擊菜單會打開重復的頁簽，我們只想打開一個頁簽

問題⑤：我想實現關閉頁簽的功能

3.6 解決重復打開頁簽的問題

要解決此問題，我們只需要在點擊菜單的時候加上判斷條件即可，如果該菜單未打開（或打開后又關閉），則執行增行操作；如果該菜單已打開，則只執行更新操作（更新ids和頁面sort）。那么通過什么來判斷菜單當前是不是處于打開的狀態呢？答案是通過中繼器的標記功能，打開時標記菜單，關閉時取消標記。

修改“菜單”中繼器中矩形上的“鼠標單擊時”用例Case1，增加判斷條件及標記動作。

添加Case2，當菜單已被標記的時候，執行更新操作。

通過以上步驟，就可以避免同一個菜單打開多個重復的頁簽，預覽原型看下效果吧。

3.7 關閉頁簽

由于前面打下了良好的基礎，關閉頁簽功能的實現就比較簡單了，只需要刪除ids中對應的id（利用replace函數，將ids中的id替換為空以實現刪除的效果），刪除頁簽和頁面（中繼器的刪除行功能），然后再取消菜單的標記（中繼器的取消標記功能）就可以了。（如果沒有關閉按鈕，現在“頁簽”中繼器中增加一個關閉圖標）

設置關閉按鈕的“鼠標單擊時”用例。

到這里，原型已經基本完成了，然后去預覽一下，隨意的去點擊菜單，切換或關閉頁簽，你會發現效果非常理想。當然仍然還有一些可以優化的地方，比如控制最多打開的頁簽數，比如重復點擊當前顯示的頁簽不再刷新頁面等等，那么這些問題留給大家去自行研究吧，當然有問題可以與我交流。

4. 經驗總結

其實，畫原型并沒有統一的標準，是要低保真還是高保證。就好比做項目，同樣的需求，一個月有一個月的做法，一個星期有一個星期的做法。而畫原型也是，同樣的功能，根據不同的用途可以有不同的畫法，可簡可繁。另外對于一些復雜的原型，在考驗你工具熟練度的同時，也是在考驗你的邏輯思維能力。Axure RP不僅僅是原型工具，畫原型也不僅僅是“畫”原型。

#專欄作家#

RAEDME大鵬，人人都是產品經理專欄作家，微信公眾號raedme

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來源于網絡