很多網站後臺或者B/S結構的應用系統， 經常會有這樣的功能：左側是導航功能表， 點擊功能表後會在右側主區域以頁簽（也可稱為選項卡）的形式打開頁面， 然後再點擊第二個個功能表， 右側主區域會打開第二個頁簽來顯示頁面。 如果對這個功能不太熟悉的話， 可以去看一下Web版的郵箱系統（比如什麼浪什麼易之類的）。 那今天分享的案例就是教大家使用中繼器與內聯框架實現網站後臺的多頁簽功能。
這個功能看起來簡單， 但如果深入探究就會發現很多邏輯問題。
問題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
本文原創發佈于人人都是產品經理。未經許可，禁止轉載。
題圖來源於網路
（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
本文原創發佈于人人都是產品經理。未經許可，禁止轉載。
題圖來源於網路