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

穿梭框（Transfer）是原型設(shè)計中較為常用的控件之一，本期我們嘗試使用Axure中繼器實現(xiàn)動態(tài)穿梭框控件。

一、交互樣式

動態(tài)交互效果如下：

1. 初始載入時

• 僅在待選區(qū)顯示待選項，已選區(qū)現(xiàn)選項不顯示；
• 禁用已選區(qū)全選勾選框、添加按鈕與移除按鈕；
• 待選區(qū)已選選項數(shù)量與已選區(qū)已選選項數(shù)量、可見選項數(shù)量均為“0”；

2. 選中選項時

• 被選中選項標(biāo)記為藍(lán)色；

• 顯示實際的已選選項數(shù)量（待選區(qū)or已選區(qū)）；

• 全選按鈕狀態(tài)變更，當(dāng)已選選項數(shù)量等于當(dāng)前區(qū)域可見選項數(shù)量時，全選按鈕變更為選中狀態(tài)，否則變更為半選中狀態(tài)；
• 啟用添加/移除按鈕；

3. 取消選中時

• 對應(yīng)選項恢復(fù)初始顏色；

• 顯示實際的已選選項數(shù)量（待選區(qū)or已選區(qū)）；

• 全選按鈕狀態(tài)變更，當(dāng)已選選項數(shù)量等于當(dāng)前區(qū)域可見選項數(shù)量時，全選按鈕變更為選中狀態(tài)，否則變更為半選中狀態(tài)；
• 根據(jù)已選選項數(shù)量判斷添加/移除按鈕狀態(tài)（禁用/啟用）；

4. 點擊添加/移除按鈕時

• 隱藏當(dāng)前區(qū)域已選中選項，并在目標(biāo)區(qū)域顯示對應(yīng)選項；
• 待選區(qū)/已選區(qū)已選選項數(shù)量均為“0”，待選區(qū)/已選區(qū)可見選項數(shù)量為實際值；
• 待選區(qū)/已選區(qū)全選勾選框為未選中狀態(tài)；
• 禁用添加、移除按鈕；
• 清空搜索框已輸入的關(guān)鍵詞；

5. 點擊全選勾選框時

• 當(dāng)全選勾選框為未選中狀態(tài)時，選中當(dāng)前區(qū)域全部選項；
• 當(dāng)全選勾選框為已選中狀態(tài)時，取消選中當(dāng)前區(qū)域全部選項；
• 當(dāng)全選勾選框為半選中狀態(tài)時，選中當(dāng)前區(qū)域全部選項；
• 同步更新已選選項數(shù)量、添加/移除按鈕狀態(tài)；

6. 輸入關(guān)鍵詞搜索時

• 輸入關(guān)鍵詞，顯示刪除圖標(biāo)，并根據(jù)輸入的關(guān)鍵詞展示對應(yīng)的可見選項；
• 清空關(guān)鍵詞，隱藏刪除圖標(biāo)，取消當(dāng)前所有已選中選中，展示當(dāng)前區(qū)域全部可見選項；
• 點擊刪除圖標(biāo)，清空已輸入的關(guān)鍵詞；
• 檢索出的可見選項可以選中/取消選中；

二、基本思路

1. 根據(jù)當(dāng)前中繼器可見選項數(shù)量（VC，VisibleCount）與已選選項數(shù)量（SC，SelectedCount）控制載入時全選勾選框（SelectAll）是否啟用及狀態(tài)；
2. 通過中繼器[[Column.Visible]]列控制待選區(qū)與已選區(qū)選項是否顯示；
3. 勾選選項時，標(biāo)記當(dāng)前選中行及目標(biāo)中繼器中對應(yīng)行，并更新已選選項數(shù)量；
4. 根據(jù)已選選項數(shù)量（SC）控制添加、移除按鈕是否啟用；
5. 點擊添加、移除按鈕時，更新已標(biāo)記行[[Column.Visible]]值。

以上是穿梭框基本思路。本期較上一期《原型設(shè)計-Axure中繼器實現(xiàn)動態(tài)樹結(jié)構(gòu)控件》難度小了很多，細(xì)心耐心即可。

三、實現(xiàn)步驟

1. 基礎(chǔ)元件-選項

1）選項-靜態(tài)效果

• 在Axure畫布中新增組合元件“Option”，構(gòu)成元素：組合元件“Option -Select”+文本標(biāo)簽（Option -Name）+矩形（未命名，寬198，高38），并調(diào)整到合適大小。其中組合元件“Option-Select”構(gòu)成元素為：矩形（未命名，寬12，高12）+Icon（√）；

• 參照上圖，分別設(shè)置單個元件的交互樣式；
• 針對組合元件Option設(shè)置選項組：Row；
• 針對組合元件Option設(shè)置交互效果，單擊時，若當(dāng)前未選中，設(shè)置選中“當(dāng)前”為真。若當(dāng)前已選中，取消選中。

• 新增中繼器“Optional”，將組合元件“Option”復(fù)制其中，并設(shè)置中繼器屬性“隔離列表項之間的選項組”為“不勾選”；

• 往中繼器“Optional”中添加初始數(shù)據(jù)（初始數(shù)據(jù)可自行根據(jù)需要添加）；

• 中繼器數(shù)據(jù)列說明。

2）選項-初始載入效果

• 頁面載入時，添加篩選，只顯示Visible=1的數(shù)據(jù)；

• 設(shè)置（Option-Name）顯示內(nèi)容為[[Column.Name]]。

2. 基礎(chǔ)元件-搜索框

不詳述，參見上期文章《原型設(shè)計-Axure中繼器實現(xiàn)動態(tài)樹結(jié)構(gòu)控件》

3. 基礎(chǔ)元件-全選選擇框

在Axure畫布中新增動態(tài)面板“SelectAll”，構(gòu)成元素如下：

基本思路：根據(jù)已選中選項的數(shù)量切換動態(tài)面板（SelectAll）。具體交互在動態(tài)效果中添加。

4. 基礎(chǔ)元件-按鈕-添加/移除

參考源文件，不詳述

5. 靜態(tài)效果

• 將制作好的基礎(chǔ)元件進(jìn)行組合如下：

• 復(fù)制一份已制作好的樣式，命名為“Selected”，并將其中繼器[[Column.Visile]]數(shù)值修改為“0”，即不顯示；

• 將已選區(qū)、待選區(qū)4個文本標(biāo)簽分別命名如下，用于后續(xù)交互。

6. 動態(tài)效果-初始載入時

• 設(shè)置Optional-SC、Selected-SC、Selected-VC初始值為0；
• 設(shè)置頁面載入時，文本標(biāo)簽Optional-VC值為Optional中繼器的可視Item匯總數(shù)；

• 設(shè)置載入時，全選勾選框Optional-SelectAll、Selected-SelectAll初始狀態(tài)，設(shè)置如下：

即，當(dāng)可選項數(shù)量為0時，禁用全選勾選框；

當(dāng)可選項數(shù)量不為0，且已選項數(shù)量等于可選項數(shù)量時，設(shè)置全選勾選框為選中；

當(dāng)可選項數(shù)量不為0，且已選項數(shù)量小于可選項數(shù)量但大于0時，設(shè)置全選勾選框為半選中；

當(dāng)可選項數(shù)量不為0，已選項數(shù)量為0時，設(shè)置全選勾選框為未選中狀態(tài)。

• 設(shè)置載入時，添加（Add）/移除（Remove）按鈕初始狀態(tài)如下：

即，當(dāng)待選區(qū)已選項數(shù)量0時，啟用添加（Add）按鈕。否則禁用；

移除（Remove）根據(jù)已選區(qū)已選項數(shù)量判斷，原理相同。

7. 動態(tài)效果-選項選中/取消選中效果

• 設(shè)置待選區(qū)Optional下組合元件Option單擊時，交互如下：

即當(dāng)選項Option未被選中時，點擊單擊：

• 設(shè)置當(dāng)前為選中；
• 標(biāo)記當(dāng)前行，標(biāo)記已選區(qū)Selected中繼器中名稱相同的行；
• 設(shè)置待選區(qū)已選項數(shù)量Optional-SC為當(dāng)前數(shù)量+1；
• 觸發(fā)事件：Add-載入時、Optional-SelectAll載入時。

當(dāng)選項Option已選中時，點擊單擊：

• 設(shè)置當(dāng)前為未選中；
• 取消標(biāo)記當(dāng)前行，取消標(biāo)記已選區(qū)Selected中繼器中名稱相同的行；
• 設(shè)置待選區(qū)已選項數(shù)量Optional-SC為當(dāng)前數(shù)量-1；
• 觸發(fā)事件：Add-載入時、Optional-SelectAll載入時。
• 設(shè)置待選區(qū)Optional下組合元件Option-Select交互如下：

即當(dāng)Option-Select未被選中時，單擊設(shè)置當(dāng)前為選中，同時觸發(fā)事件Option-單擊時；

當(dāng)Option-Select被選中時，單擊設(shè)置當(dāng)前為未選中，同時觸發(fā)事件Option-單擊時。

• 參照A、B步驟，針對已選區(qū)Selected中選項與選項勾選框做類似的交互設(shè)置。

8.動態(tài)效果-全選勾選框選中/取消選中效果

• 設(shè)置待選區(qū)Optional下組合元件SelectAll單擊時，交互如下：

即，當(dāng)全選勾選框為未選中狀態(tài)時，設(shè)置當(dāng)前為選中，觸發(fā)事件：Option-單擊時；

當(dāng)全選勾選框為已選中狀態(tài)時，取消當(dāng)前選中，觸發(fā)事件：Option-單擊時；

當(dāng)全選勾選框為半選中狀態(tài)時，取消已選中選項，更新已選中選項數(shù)量Optional-SC為0，設(shè)置全選勾選框為未選中狀態(tài)，并觸發(fā)事件：Optional-SelectAll單擊時。

• 參照A步驟，針對已選區(qū)Selected下組合元件SelectAll做同樣設(shè)置。

9. 動態(tài)效果-添加/移除效果

• 設(shè)置添加（Add）按鈕單擊時交互效果如下：

即，當(dāng)待選區(qū)已選中選項數(shù)量大于0時，

更新待選區(qū)已標(biāo)記行未不可見，更新已選區(qū)對應(yīng)行為可見；

更新Optional-SC、Selected-SC值為0，更新Optional-VC、Selected-VC值為對應(yīng)中繼器可見數(shù)量；

取消標(biāo)記中繼器Optional、Selected全部行；

觸發(fā)事件：Add-載入時、Optional-SelectAll-載入時、Selected-SelectAll-載入時。

• 參照A設(shè)置，設(shè)置移除（Remove）按鈕交互。

10. 動態(tài)效果-模糊查詢

• 設(shè)置待選區(qū)Optional下組合元件搜索框（Search）文本改變時交互效果如下：

即，當(dāng)Search搜索框值不為空時，

顯示Icon（Delete）；

添加篩選：[[Item.Name.indexof(Name)>-1&&Item.Visible==1]]；

更新Optional-VC值為篩選后的可見選項數(shù)。

當(dāng)Search搜索框值不為空時

隱藏Icon（Delete）；

添加篩選：只顯示Visible=1的選項；

取消標(biāo)記中繼器Optional、Selected下全部行；

更新Optional-SC、Selected-SC值為0，更新Optional-VC、Selected-VC值為對應(yīng)中繼器可見數(shù)量；

觸發(fā)事件：Optional-SelectAll-載入時、Add-載入時、Remove-載入時。

• 參照A步驟，針對已選區(qū)Selected下組合元件搜索框（Search）做同樣設(shè)置

至此，穿梭框（Transfer）交互效果制作完畢。

四、在線演示與源文件下載

1、在線演示地址：https://e8scr9.axshare.com

2、源文件下載地址：

鏈接：https://pan.baidu.com/s/1kjO8By5fWLFLDb_miX2qaw

提取碼：6ztz

3、源文件采用Axure9.0制作，若無法打開，請檢查Axure版本。

4、本文首發(fā)于個人公眾號：倉配那些事兒。

5、近期由于私人事務(wù)繁忙，導(dǎo)致倉儲規(guī)劃系列斷更，等處理完此部分事務(wù)，我會繼續(xù)在個人公眾號中更新。

作者：Pershing，個人公眾號：倉配那些事兒

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

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