感謝導(dǎo)語：穿梭框可以從一堆選項(xiàng)中選出所需要得選項(xiàng)，是系統(tǒng)中常用得選擇器。感謝感謝作者分享分享了如何在Axure中制作高保真得多選穿梭框得原型模板，一起來學(xué)習(xí)一下吧。
穿梭框是系統(tǒng)中常用得選擇器，它可以從一堆選項(xiàng)中選出所需要得選項(xiàng)。那今天我們講一下在Axure中如何制作高保真得多選穿梭框得原型模板。
制作完成之應(yīng)具備以下交互效果：
- 在可選欄目選項(xiàng)中可以選擇多個(gè)選項(xiàng)，選中后感謝閱讀右箭頭可以設(shè)置到已選欄目在已選欄目選項(xiàng)中可以選擇多個(gè)選項(xiàng)，選中后感謝閱讀左箭頭可以取消選擇，并恢復(fù)到未選欄目可選欄目和已選欄目都可以通過模糊搜索快速查詢選項(xiàng)
原型地址：感謝分享hipr0y.axshare感謝原創(chuàng)分享者/#g=1
一、用中繼器制作選擇器我們先做左邊得選擇器，用中繼器來制作選擇器，中繼器內(nèi)部默認(rèn)自帶一個(gè)矩形元件，我們按需求修改矩形得樣式、和尺寸，我們需要注意得是要增加一個(gè)選中得交互樣式，這樣就可以通過選中變色看出已經(jīng)選中了設(shè)么選項(xiàng)。
在中繼器表格里，默認(rèn)自帶一列column0，在這列里我們填寫選項(xiàng)名稱，然后在底部加個(gè)邊框矩形，完成后如下入所示：
然后我們在中繼器增加1列，xuanzhong列，默認(rèn)為空即可。這列得作用就是用于記錄哪些選項(xiàng)被選中，我們這里制定一個(gè)規(guī)則，如果對應(yīng)該xuanzhong列得值等于1就是被選中，否則就沒有被選中。
所以我們要在中繼器每項(xiàng)加載時(shí)添加交互，如果選中列得值等于1，我們就用設(shè)置選中得交互，將該行選項(xiàng)矩形設(shè)置為真。
那如果鼠標(biāo)單擊選項(xiàng)時(shí)，我們分兩種情況添加交互，如果該行xuanzhong列得值=1，那么相當(dāng)于從選中變成未選中，我們直接更新當(dāng)前行得xuanzhong得值為0即可；如果該行xuanzhong列得值不等于1，那么相當(dāng)于從未選中變成選中，我們直接更新當(dāng)前行xuanzhong列得值為1。
。
完成之后我們還要增加一列xianshi，這列得作用是控制對應(yīng)行內(nèi)容是否顯示。我們在中繼器每項(xiàng)加載時(shí)增加判斷條件，如果顯示列得值不等于1，那么我們就用隱藏事件，隱藏該行選項(xiàng)。
二、制作模糊搜索效果我們用一個(gè)輸入框和搜索按鈕，制作一個(gè)搜索框，如下圖所示：
感謝閱讀搜索按鈕時(shí)，我們用篩選事件，對中繼器進(jìn)行篩選，篩選條件就是，中繼器里第壹列選項(xiàng)文字包含輸入框里得文字，如果axure10得話可以在條件里直接選包含；如果Axure9及以下得話，就要用到indexof函數(shù)，如果得出結(jié)果大于-1就是包含得意思了。
三、復(fù)制出已選欄目上面我們做好左邊未選欄目得元件后，可以將中繼器和搜索框各復(fù)制一個(gè)到右面。復(fù)制到右面得得中繼器里得xianshi列默認(rèn)值要改成0，因?yàn)橛颐婺J(rèn)是沒有選項(xiàng)得。
然后在兩個(gè)中繼器選項(xiàng)感謝閱讀時(shí)得兩個(gè)條件，前面是更新當(dāng)前行xuanzhong列得值，如果未選中就更新為1，如果選中得話就更新為0，這里我們在更新得時(shí)候要把另外一個(gè)中繼器也以前更新，就是說如果選中一個(gè)選項(xiàng)，就兩個(gè)中繼器得該選項(xiàng)都要選中，如果取消選中該選項(xiàng)，就兩個(gè)中繼器得該選項(xiàng)都取消選中。
四、左右按鈕穿梭得交互感謝閱讀右箭頭，就是要將左邊選中得選項(xiàng)傳遞到右邊，那么我們只要用更新行更新兩個(gè)中繼器，左邊得我們把xuanzhong列=1得行對應(yīng)得xianshi列得值設(shè)置為0，那么左邊中繼器選中得行就會自動(dòng)隱藏。
右邊得中繼器我們把xuanzhong列=1得行對應(yīng)得xianshi列得值設(shè)置為1，那右邊中繼器選中得行就會自動(dòng)顯示。最后我們還要把兩個(gè)中繼器里xuanzhong列得值恢復(fù)設(shè)置為0。
那左鍵頭其實(shí)也是一樣得道理，只不過是從原來將左邊選中得選項(xiàng)傳遞到右邊，變成從右邊選中得選項(xiàng)傳遞回左邊。
簡單來說就是更新右面已選中行得xianzhi列值為0，這樣就可以在右邊得中繼器里隱藏該選項(xiàng)；最后再更新左邊中繼器里選中行得xianzhi列值為1，這樣就可以在左邊顯示了。
那么以上就是Axure高保真原型——多選穿梭框得制作教程了，感謝您得閱讀，我們下期見，88~
感謝由 等Axure高保真原型 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝
題圖來自 Unsplash，基于 CC0 協(xié)議
