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

編輯導(dǎo)語(yǔ)：穿梭框可以從一堆選項(xiàng)中選出所需要的選項(xiàng)，是系統(tǒng)中常用的選擇器。本文作者分享了如何在Axure中制作高保真的多選穿梭框的原型模板，一起來(lái)學(xué)習(xí)一下吧。

穿梭框是系統(tǒng)中常用的選擇器，它可以從一堆選項(xiàng)中選出所需要的選項(xiàng)。那今天我們講一下在Axure中如何制作高保真的多選穿梭框的原型模板。

制作完成之應(yīng)具備以下交互效果：

1. 在可選欄目選項(xiàng)中可以選擇多個(gè)選項(xiàng)，選中后點(diǎn)擊右箭頭可以設(shè)置到已選欄目
2. 在已選欄目選項(xiàng)中可以選擇多個(gè)選項(xiàng)，選中后點(diǎn)擊左箭頭可以取消選擇，并恢復(fù)到未選欄目
3. 可選欄目和已選欄目都可以通過(guò)模糊搜索快速查詢(xún)選項(xiàng)

原型地址：https://hipr0y.axshare.com/#g=1

一、用中繼器制作選擇器

我們先做左邊的選擇器，用中繼器來(lái)制作選擇器，中繼器內(nèi)部默認(rèn)自帶一個(gè)矩形元件，我們按需求修改矩形的樣式、和尺寸，我們需要注意的是要增加一個(gè)選中的交互樣式，這樣就可以通過(guò)選中變色看出已經(jīng)選中了設(shè)么選項(xiàng)。

在中繼器表格里，默認(rèn)自帶一列column0，在這列里我們填寫(xiě)選項(xiàng)名稱(chēng)，然后在底部加個(gè)邊框矩形，完成后如下入所示：

然后我們?cè)谥欣^器增加1列，xuanzhong列，默認(rèn)為空即可。這列的作用就是用于記錄哪些選項(xiàng)被選中，我們這里制定一個(gè)規(guī)則，如果對(duì)應(yīng)該xuanzhong列的值等于1就是被選中，否則就沒(méi)有被選中。

所以我們要在中繼器每項(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，這列的作用是控制對(duì)應(yīng)行內(nèi)容是否顯示。我們?cè)谥欣^器每項(xiàng)加載時(shí)增加判斷條件，如果顯示列的值不等于1，那么我們就用隱藏事件，隱藏該行選項(xiàng)。

二、制作模糊搜索效果

我們用一個(gè)輸入框和搜索按鈕，制作一個(gè)搜索框，如下圖所示：

點(diǎn)擊搜索按鈕時(shí)，我們用篩選事件，對(duì)中繼器進(jìn)行篩選，篩選條件就是，中繼器里第一列選項(xiàng)文字包含輸入框里的文字，如果axure10的話(huà)可以在條件里直接選包含；如果Axure9及以下的話(huà)，就要用到indexof函數(shù)，如果得出結(jié)果大于-1就是包含的意思了。

三、復(fù)制出已選欄目

上面我們做好左邊未選欄目的元件后，可以將中繼器和搜索框各復(fù)制一個(gè)到右面。復(fù)制到右面的的中繼器里的xianshi列默認(rèn)值要改成0，因?yàn)橛颐婺J(rèn)是沒(méi)有選項(xiàng)的。

然后在兩個(gè)中繼器選項(xiàng)點(diǎn)擊時(shí)的兩個(gè)條件，前面是更新當(dāng)前行xuanzhong列的值，如果未選中就更新為1，如果選中的話(huà)就更新為0，這里我們?cè)诟碌臅r(shí)候要把另外一個(gè)中繼器也以前更新，就是說(shuō)如果選中一個(gè)選項(xiàng)，就兩個(gè)中繼器的該選項(xiàng)都要選中，如果取消選中該選項(xiàng)，就兩個(gè)中繼器的該選項(xiàng)都取消選中。

四、左右按鈕穿梭的交互

點(diǎn)擊右箭頭，就是要將左邊選中的選項(xiàng)傳遞到右邊，那么我們只要用更新行更新兩個(gè)中繼器，左邊的我們把xuanzhong列=1的行對(duì)應(yīng)的xianshi列的值設(shè)置為0，那么左邊中繼器選中的行就會(huì)自動(dòng)隱藏。

右邊的中繼器我們把xuanzhong列=1的行對(duì)應(yīng)的xianshi列的值設(shè)置為1，那右邊中繼器選中的行就會(huì)自動(dòng)顯示。最后我們還要把兩個(gè)中繼器里xuanzhong列的值恢復(fù)設(shè)置為0。

那左鍵頭其實(shí)也是一樣的道理，只不過(guò)是從原來(lái)將左邊選中的選項(xiàng)傳遞到右邊，變成從右邊選中的選項(xiàng)傳遞回左邊。

簡(jiǎn)單來(lái)說(shuō)就是更新右面已選中行的xianzhi列值為0，這樣就可以在右邊的中繼器里隱藏該選項(xiàng)；最后再更新左邊中繼器里選中行的xianzhi列值為1，這樣就可以在左邊顯示了。

那么以上就是Axure高保真原型——多選穿梭框的制作教程了，感謝您的閱讀，我們下期見(jiàn)，88~