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

在用Axure的時候，怎么通過中繼器實現(xiàn)穿梭框功能呢？本文分享了一個方法。

AXURE中的中繼器是非常強(qiáng)大的底層組件。我們利用好中繼器的強(qiáng)大功能，可以為我們原型設(shè)計帶來很多便利，今天我們要介紹的是如何利用中繼器來組裝一個穿梭框。

我們先來看下效果：

選中幾項：

點擊移到右側(cè)已選區(qū)：

在已選區(qū)再剔除：

下面我們詳細(xì)介紹一下，如果通過中繼器來實現(xiàn)這個穿梭框。

1.?先在頁面上拖入一個動態(tài)面板，取名字為“候選區(qū)動態(tài)面板”

2. 在動態(tài)面板中放入一個中繼器。

我們在中繼器中分別放入2個文本框元件，分別取名字為“選中標(biāo)志”和“選項名稱”。

選中標(biāo)志我們采用“Font Awesome 5 Free”字體，來顯示選中狀態(tài)和未選中狀態(tài)，兩款字體如下：

選中/未選中

對應(yīng)的中繼器列設(shè)置如下：

分別有：“name”、“checked”、“view”

• name:用來顯示項目的名稱
• checked:用來顯示選中還是未選中（由于是Font Awesome 5 Free字體，在中繼器中無法正常顯示），在此處默認(rèn)為“未選中”狀態(tài)的字體。
• view：用來控制是否顯示在頁面上。默認(rèn)都是“1”。

3. 設(shè)置默認(rèn)的加載交互

即把中繼器中的數(shù)據(jù)字段與頁面上的對應(yīng)。

4. 把上述動態(tài)面板復(fù)制一份，改名稱為“已選動態(tài)面板”、“已選中繼器”

5. 設(shè)置候選項的點擊交互。

（1）如果點擊的行為“未選中”狀態(tài)的：

1. 先將點擊行中的選中狀態(tài)字段的文字設(shè)置為“已選中”的文字，這樣子我們頁面上就看到了選中狀態(tài)的圖形文字。
2. 對“已選中繼器”執(zhí)行添加1行的操作。
3. 對“已選中繼器”執(zhí)行標(biāo)記全部行的操作。

（2）如果是“已選中”狀態(tài)的：

1. 將“已選中”的文字修改為“未選中”。
2. 將“已選中繼器”中將當(dāng)前取消的數(shù)據(jù)刪除。

這里要主要，我們當(dāng)前是在后續(xù)中繼器中，我們要控制操作的是“已選中繼器”，

所以在規(guī)則設(shè)置中，要選“[[TargetItem.name==Item.name]]”，TargetItem就是代指“已選中繼器”。

6. 接下來我們來對選中移動按鈕進(jìn)行交互設(shè)計

（1）先將“已選中繼器”中已標(biāo)識的數(shù)據(jù)行中的“VIEW”字段設(shè)置為“1”，即是可以顯示的狀態(tài)。

（2）為了防止已選中繼器數(shù)據(jù)過多時，只顯示第一頁，所以對已選中繼器顯示的頁碼進(jìn)行了設(shè)置。

（3）對候選中繼器中checked字段為已選中狀態(tài)的行刪除。

這樣，點擊移動按鈕后，候選區(qū)中勾選的項會移動到已選區(qū)。

7. 對已選區(qū)中繼器進(jìn)行剔除操作

（1）未選中狀態(tài)：

（2）選中狀態(tài)：

8. 剔除按鈕

第一步先點擊剔除按鈕時，對“候選中繼器”VIEW字段=1的進(jìn)行標(biāo)記。

第二步對“候選中繼器”進(jìn)行篩選，只對view=1的數(shù)據(jù)顯示，并排除其他篩選。

第三步對已選中繼器中選中狀態(tài)的行進(jìn)行刪除。

這樣子，就完成了我們上面用原生AXURE的中繼器來實現(xiàn)穿梭框組件，實現(xiàn)多項選擇和剔除等交互操作。

原型地址：https://0571pm-1255625528.cos.ap-shanghai.myqcloud.com/html/%E7%A9%BF%E6%A2%AD%E6%A1%86/index.html

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

題圖來自Unsplash，基于CC0協(xié)議。