很多網(wǎng)站后臺(tái)或者B/S結(jié)構(gòu)的應(yīng)用系統(tǒng)，經(jīng)常會(huì)有這樣的功能：左側(cè)是導(dǎo)航菜單，點(diǎn)擊菜單后會(huì)在右側(cè)主區(qū)域以頁(yè)簽（也可稱為選項(xiàng)卡）的形式打開頁(yè)面，然后再點(diǎn)擊第二個(gè)個(gè)菜單，右側(cè)主區(qū)域會(huì)打開第二個(gè)頁(yè)簽來(lái)顯示頁(yè)面。如果對(duì)這個(gè)功能不太熟悉的話，可以去看一下Web版的郵箱系統(tǒng)（比如什么浪什么易之類的）。那今天分享的案例就是教大家使用中繼器與內(nèi)聯(lián)框架實(shí)現(xiàn)網(wǎng)站后臺(tái)的多頁(yè)簽功能。

1、原型解析

這個(gè)功能看起來(lái)簡(jiǎn)單，但如果深入探究就會(huì)發(fā)現(xiàn)很多邏輯問(wèn)題。

問(wèn)題1：點(diǎn)擊菜單，在主區(qū)域顯示該菜單對(duì)應(yīng)的頁(yè)簽和頁(yè)面。

• 擴(kuò)展1：如果該菜單對(duì)應(yīng)的頁(yè)面未打開，則在新頁(yè)簽中打開頁(yè)面；
• 擴(kuò)展2：如果該菜單對(duì)應(yīng)的頁(yè)面已打開但未顯示，則在原頁(yè)簽中顯示頁(yè)面；
• 擴(kuò)展3：如果該菜單對(duì)應(yīng)的頁(yè)面已打開且已顯示，則不進(jìn)行任何操作。

問(wèn)題2：頁(yè)簽和頁(yè)面需要對(duì)應(yīng)同步顯示。

問(wèn)題3：當(dāng)打開多個(gè)頁(yè)簽之后，點(diǎn)擊頁(yè)簽可以切換對(duì)應(yīng)的頁(yè)面顯示。

問(wèn)題4：當(dāng)前顯示的頁(yè)面對(duì)應(yīng)的頁(yè)簽需要突出顯示。

問(wèn)題5：點(diǎn)擊頁(yè)簽上的關(guān)閉圖標(biāo)可以同步關(guān)閉頁(yè)簽及對(duì)應(yīng)的頁(yè)面。

• 擴(kuò)展1：如果關(guān)閉的是當(dāng)前顯示的頁(yè)面，關(guān)閉后顯示上一個(gè)打開的頁(yè)面；
• 擴(kuò)展2：如果關(guān)閉的不是當(dāng)前顯示的頁(yè)面，關(guān)閉后仍然顯示當(dāng)前頁(yè)面。

2. 設(shè)計(jì)思路

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

• 針對(duì)菜單部分：可選的元件很多，在此不一一列舉，只要是能點(diǎn)擊的元件基本就可以，但使用不同元件的結(jié)果就是過(guò)程復(fù)雜程度不同以及靈活程度不同。但考慮到原型的通用性，不同情況下菜單項(xiàng)是不同的，于是考慮使用更為靈活的中繼器元件來(lái)做菜單。
• 針對(duì)頁(yè)簽部分：因?yàn)檫@一部分會(huì)涉及到頁(yè)簽的動(dòng)態(tài)增減，所以毫不猶豫選擇中繼器。

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

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

本案例中三個(gè)部分，全部使用中繼器來(lái)實(shí)現(xiàn)，好處則是配置簡(jiǎn)單，靈活度高，可復(fù)用性強(qiáng)。如果你嘗試了其他元件，你就會(huì)理解使用中繼器真的是一勞永逸。

3. 制作過(guò)程

3.1 準(zhǔn)備三個(gè)中繼器

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

（1）設(shè)置“菜單”中繼器

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

（2）設(shè)置“頁(yè)簽”中繼器

設(shè)置中繼器的列為“id”和“menu”，并清空自帶的數(shù)據(jù)，中繼器中自帶的“矩形”元件樣式請(qǐng)自行設(shè)置，修改中繼器的“每項(xiàng)加載時(shí)”用例。

（3）設(shè)置“頁(yè)面”中繼器

設(shè)置中繼器的列為“id”，“url”和“sort”（存儲(chǔ)排序序號(hào)），清空自帶數(shù)據(jù)，保留一個(gè)空白行（或在url中定義一個(gè)初始頁(yè)面），刪除中繼器中的矩形，并拖入一個(gè)內(nèi)聯(lián)框架，修改中繼器的“每項(xiàng)加載時(shí)”用例，修改中繼器的分頁(yè)樣式（多頁(yè)顯示，每頁(yè)項(xiàng)目數(shù)1）。

3.2 實(shí)現(xiàn)點(diǎn)擊菜單打開頁(yè)簽及頁(yè)面

回到“菜單”中繼器中，在“矩形”元件上設(shè)置“鼠標(biāo)單擊時(shí)”用例，分別向中繼器“頁(yè)簽”和“頁(yè)面”中插入一行數(shù)據(jù)。“頁(yè)簽”中繼器中插入的是當(dāng)前菜單的“id”和“menu”，以便新增的頁(yè)簽可以顯示菜單的名稱，“頁(yè)面”中繼器中插入的是當(dāng)前菜單的“id”和“url”，以便新增的頁(yè)面可以在其內(nèi)聯(lián)框架中顯示菜單對(duì)應(yīng)的頁(yè)面。

這時(shí)候我們可以預(yù)覽一下原型，當(dāng)你點(diǎn)擊菜單時(shí)，你會(huì)發(fā)現(xiàn)：頁(yè)簽不斷向后增加，而頁(yè)面并沒有顯示（或者只顯示了第一個(gè)菜單對(duì)應(yīng)的頁(yè)簽，之后的就不再顯示），沒關(guān)系，我們現(xiàn)在總結(jié)一下原型存在的問(wèn)題，然后在接下來(lái)的步驟中逐一解決。

其實(shí)這里會(huì)出現(xiàn)很多問(wèn)題，有簡(jiǎn)單有復(fù)雜，這里我根據(jù)問(wèn)題的優(yōu)先級(jí)先拿出三個(gè)來(lái)解決，因?yàn)榻鉀Q了這三個(gè)問(wèn)題，我們的原型在要求比較低的情況下可以到此為止了，已經(jīng)能夠滿足基本的演示。那這三個(gè)問(wèn)題就是：

• 問(wèn)題①：頁(yè)面不能正常顯示
• 問(wèn)題②：我希望點(diǎn)擊已打開的頁(yè)簽時(shí)，實(shí)現(xiàn)頁(yè)簽及頁(yè)面的切換
• 問(wèn)題③：我希望當(dāng)前打開的頁(yè)簽可以突出顯示

3.3 解決頁(yè)面不能正常顯示的問(wèn)題

熟悉中繼器的朋友這時(shí)候應(yīng)該馬上就能知道頁(yè)面不能正常顯示的原因，因?yàn)槲覀冊(cè)谇懊嬖O(shè)置中繼器的時(shí)候，配置了中繼器的分頁(yè)屬性，即每頁(yè)顯示一個(gè)項(xiàng)目，而我們?cè)邳c(diǎn)擊菜單的時(shí)候，每點(diǎn)擊一次就會(huì)像中繼器中增加一個(gè)項(xiàng)目，但是增加的項(xiàng)目默認(rèn)是排在后面的，也就是排在了第2頁(yè)，第3頁(yè)，第N頁(yè)。所以我們只能看到第一個(gè)菜單的頁(yè)面，之后點(diǎn)擊的菜單的頁(yè)面就看不到。

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

首先添加一個(gè)全局變量“sort”（或?qū)⒛J(rèn)的全局變量名修改為“sort”），然后修改菜單的“鼠標(biāo)單擊時(shí)”事件。在點(diǎn)擊菜單的時(shí)候，給sort值+1，給“頁(yè)面”中繼器增行的時(shí)候，設(shè)置sort值等于新的全局變量sort值。這樣做就可以使得每次打開的頁(yè)面的sort值都比上一個(gè)大1，然后利用中繼器的排序功能就可以將最后打開的頁(yè)面排在最前面。

然后我們?cè)俳o中中繼器“頁(yè)面”添加排序功能，排序動(dòng)作可以在中繼器“載入時(shí)”來(lái)執(zhí)行。

這時(shí)候再來(lái)預(yù)覽，我們可以發(fā)現(xiàn)無(wú)論如何點(diǎn)擊菜單，頁(yè)面都可以正常顯示了，上面的問(wèn)題①解決。接下來(lái)再解決問(wèn)題②。

3.4 點(diǎn)擊頁(yè)簽切換頁(yè)面

這個(gè)問(wèn)題比較容易解決，根據(jù)上一步中頁(yè)面的顯示邏輯，點(diǎn)擊頁(yè)簽的時(shí)候，只需要更新一下“頁(yè)面”中繼器中的sort值即可（在最新的全局變量sort值的基礎(chǔ)上+1）。

3.5 最新打開的頁(yè)簽突出顯示

突出顯示的樣式我們可以設(shè)置頁(yè)簽中形狀的“選中”樣式來(lái)實(shí)現(xiàn)，如果是當(dāng)前點(diǎn)擊的菜單對(duì)應(yīng)的頁(yè)簽，就將其設(shè)置為選中，以激活其選中樣式。那么問(wèn)題來(lái)了，什么時(shí)候設(shè)置頁(yè)簽中形狀的選中呢？又如何知道該設(shè)置那個(gè)頁(yè)簽的？

這個(gè)問(wèn)題可簡(jiǎn)單可復(fù)雜，簡(jiǎn)單的情況就是，我們只考慮點(diǎn)擊菜單或者點(diǎn)擊頁(yè)簽切換顯示的時(shí)候，點(diǎn)擊哪個(gè)菜單或頁(yè)簽，對(duì)應(yīng)的頁(yè)簽就選中，只要通過(guò)菜單和頁(yè)簽的id進(jìn)行判斷就可以。但是，還有一種復(fù)雜的情況要考慮，那就是，如果關(guān)閉了一個(gè)選中狀態(tài)的頁(yè)簽該怎么辦呢？剩余的頁(yè)簽該讓誰(shuí)處于選中狀態(tài)呢？顯然前面的解決方案是沒有辦法解決這一問(wèn)題的，我們還需要從長(zhǎng)計(jì)議。

尋找這個(gè)問(wèn)題的解決方案時(shí)，讓我走了不少?gòu)澛?，嘗試了N種方式，有的根本行不通，有的表面行得通但時(shí)不時(shí)的會(huì)出現(xiàn)失靈的情況，不過(guò)幸運(yùn)的是，最終還是找到了一種完美的解決方案。方案如下：

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

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

具體到原型中，需要?jiǎng)?chuàng)建兩個(gè)全局變量“id”和“ids”，id用來(lái)記錄當(dāng)前id，ids用來(lái)記錄id串，然后在菜單和頁(yè)簽的“鼠標(biāo)單擊時(shí)”事件中增加更新ids的動(dòng)作。最后在“頁(yè)簽”中繼器的每項(xiàng)加載時(shí)執(zhí)行判斷并設(shè)置選中。

菜單的“鼠標(biāo)單擊時(shí)”用例：

頁(yè)簽的“鼠標(biāo)單擊時(shí)”用例：

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

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

這時(shí)候我們來(lái)預(yù)覽一下頁(yè)面，是不是頁(yè)簽的選中效果已經(jīng)出來(lái)了，但是竟然還有一個(gè)問(wèn)題，就是切換頁(yè)簽的時(shí)候，頁(yè)簽的選中效果并沒有在頁(yè)簽之間切換，這是為什么呢？這是因?yàn)椤绊?yè)簽”中繼器沒有刷新（也就是沒有重新加載），我們需要在每次點(diǎn)擊頁(yè)簽時(shí)，讓其重新加載一下，實(shí)現(xiàn)方式就是給“頁(yè)簽”中繼器增加一個(gè)更新操作（不需要跟新任何數(shù)據(jù)，只添加這樣一個(gè)動(dòng)作就可以）。

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

問(wèn)題④：重復(fù)點(diǎn)擊菜單會(huì)打開重復(fù)的頁(yè)簽，我們只想打開一個(gè)頁(yè)簽

問(wèn)題⑤：我想實(shí)現(xiàn)關(guān)閉頁(yè)簽的功能

3.6 解決重復(fù)打開頁(yè)簽的問(wèn)題

要解決此問(wèn)題，我們只需要在點(diǎn)擊菜單的時(shí)候加上判斷條件即可，如果該菜單未打開（或打開后又關(guān)閉），則執(zhí)行增行操作；如果該菜單已打開，則只執(zhí)行更新操作（更新ids和頁(yè)面sort）。那么通過(guò)什么來(lái)判斷菜單當(dāng)前是不是處于打開的狀態(tài)呢？答案是通過(guò)中繼器的標(biāo)記功能，打開時(shí)標(biāo)記菜單，關(guān)閉時(shí)取消標(biāo)記。

修改“菜單”中繼器中矩形上的“鼠標(biāo)單擊時(shí)”用例Case1，增加判斷條件及標(biāo)記動(dòng)作。

添加Case2，當(dāng)菜單已被標(biāo)記的時(shí)候，執(zhí)行更新操作。

通過(guò)以上步驟，就可以避免同一個(gè)菜單打開多個(gè)重復(fù)的頁(yè)簽，預(yù)覽原型看下效果吧。

3.7 關(guān)閉頁(yè)簽

由于前面打下了良好的基礎(chǔ)，關(guān)閉頁(yè)簽功能的實(shí)現(xiàn)就比較簡(jiǎn)單了，只需要?jiǎng)h除ids中對(duì)應(yīng)的id（利用replace函數(shù)，將ids中的id替換為空以實(shí)現(xiàn)刪除的效果），刪除頁(yè)簽和頁(yè)面（中繼器的刪除行功能），然后再取消菜單的標(biāo)記（中繼器的取消標(biāo)記功能）就可以了。（如果沒有關(guān)閉按鈕，現(xiàn)在“頁(yè)簽”中繼器中增加一個(gè)關(guān)閉圖標(biāo)）

設(shè)置關(guān)閉按鈕的“鼠標(biāo)單擊時(shí)”用例。

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

4. 經(jīng)驗(yàn)總結(jié)

其實(shí)，畫原型并沒有統(tǒng)一的標(biāo)準(zhǔn)，是要低保真還是高保證。就好比做項(xiàng)目，同樣的需求，一個(gè)月有一個(gè)月的做法，一個(gè)星期有一個(gè)星期的做法。而畫原型也是，同樣的功能，根據(jù)不同的用途可以有不同的畫法，可簡(jiǎn)可繁。另外對(duì)于一些復(fù)雜的原型，在考驗(yàn)?zāi)愎ぞ呤炀毝鹊耐瑫r(shí)，也是在考驗(yàn)?zāi)愕倪壿嬎季S能力。Axure RP不僅僅是原型工具，畫原型也不僅僅是“畫”原型。

#專欄作家#

RAEDME大鵬，人人都是產(chǎn)品經(jīng)理專欄作家，微信公眾號(hào)raedme

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)源于網(wǎng)絡(luò)