? ? 列表框左右雙向選擇效果在互聯(lián)網(wǎng)平臺(tái)中應(yīng)用非常多召烂，從左側(cè)的待選項(xiàng)中選中選項(xiàng)移入右側(cè)娃承，從右側(cè)的已選項(xiàng)中取消選項(xiàng)移入左側(cè)。PMGOD將通過(guò)這篇案列分享酗昼，教大家使用Axure制作實(shí)現(xiàn)“雙向列表帶計(jì)數(shù)選擇”
實(shí)現(xiàn)效果
1麻削、雙向列表均為單項(xiàng)選擇呛哟，不支持多選或全選；
2榛鼎、移入選項(xiàng)鳖孤、點(diǎn)擊選項(xiàng)時(shí)分別有文字顏色或背景色的變化淌铐，突出選項(xiàng)；
3际起、如果左側(cè)選項(xiàng)沒(méi)有選中街望，點(diǎn)擊向右選擇時(shí)弟跑，提示“請(qǐng)從待選城市選擇數(shù)據(jù)項(xiàng)孟辑！”；
4炭玫、如果右側(cè)選項(xiàng)沒(méi)有選中吞加，點(diǎn)擊向左選擇時(shí)，提示“請(qǐng)從已選城市選擇數(shù)據(jù)項(xiàng)叶圃！”掺冠；
5码党、每次選擇變動(dòng)后闽瓢，可選項(xiàng)和已選項(xiàng)的數(shù)據(jù)都會(huì)相應(yīng)變化心赶；
原理分析
1缨叫、提供左右兩個(gè)列表框，可以互相選擇相應(yīng)選項(xiàng)
2销钝、左側(cè)為待選項(xiàng)的容器蒸健，用來(lái)顯示可供選擇的列表項(xiàng)
3婉商、右側(cè)為已選項(xiàng)的容器丈秩，用來(lái)顯示已經(jīng)選擇的列表項(xiàng)
4、兩個(gè)列表框之間的選項(xiàng)通過(guò)兩個(gè)按鈕來(lái)實(shí)現(xiàn)數(shù)據(jù)交互
5饺著、利用Axure的中繼器實(shí)現(xiàn)列表框的容器功能
元件準(zhǔn)備
1幼衰、待選城市文本標(biāo)簽塑顺，用于顯示待選城市的計(jì)數(shù)
2、待選項(xiàng)背景框（left_bg）扬绪，放在待選項(xiàng)底部
3挤牛、待選項(xiàng)動(dòng)態(tài)面板(left)种蘸，用來(lái)存放可供選擇的列表項(xiàng)
3.1 left面板中包含一個(gè)動(dòng)態(tài)面板航瞭，放置中繼器left
3.2 中繼器left中用來(lái)存儲(chǔ)可供選擇的列表項(xiàng)
4、選項(xiàng)矩形（left_sl）章办，觸發(fā)左側(cè)待選項(xiàng)移入右側(cè)已選項(xiàng)
5藕届、選項(xiàng)矩形（right_sl）亭饵，觸發(fā)右側(cè)已選項(xiàng)移入左側(cè)待選項(xiàng)
6辜羊、已選城市文本標(biāo)簽，用于顯示已選城市的計(jì)數(shù)
7庇麦、已選項(xiàng)背景框（right_bg）山橄，放在已選項(xiàng)底部
8舍悯、已選項(xiàng)動(dòng)態(tài)面板(right)，用來(lái)存放已經(jīng)選擇的列表項(xiàng)
8.1 right面板中包含一個(gè)動(dòng)態(tài)面板萌衬，放置中繼器right
8.2 中繼器right用來(lái)存儲(chǔ)已經(jīng)選擇的列表項(xiàng)
9饮醇、操作提示組合元件，用于沒(méi)有選擇選項(xiàng)時(shí)的錯(cuò)誤
10秕豫、案例背景朴艰，放在底部观蓄，可有可無(wú)
隱藏提示文件，重新布局元件后效果如下：
實(shí)現(xiàn)步驟
準(zhǔn)備左側(cè)待選項(xiàng)列表數(shù)據(jù)
? ? 拖入一個(gè)中繼器left祠墅，給中繼器的默認(rèn)Column0列添加21條數(shù)據(jù)，對(duì)應(yīng)顯示廣東省21個(gè)地市
? ? 將中繼器的數(shù)據(jù)通過(guò)每項(xiàng)加載時(shí)賦值給矩形毁嗦，矩形顯示的數(shù)據(jù)就是待選項(xiàng)源數(shù)據(jù)
? ? 將中繼器轉(zhuǎn)換為動(dòng)態(tài)面板sleft亲茅，動(dòng)態(tài)面板的大小為218px*200px。設(shè)置動(dòng)態(tài)面板的滾動(dòng)條屬性為“自動(dòng)顯示垂直滾動(dòng)條”
實(shí)用小技巧：將可滾動(dòng)的動(dòng)態(tài)面板sleft轉(zhuǎn)換為動(dòng)態(tài)面板left狗准，動(dòng)態(tài)面板的大小為200px*200px克锣。設(shè)置動(dòng)態(tài)面板的滾動(dòng)條屬性為“無(wú)”，從而可以實(shí)現(xiàn)滾動(dòng)且隱藏滾動(dòng)條的效果
? ? 在動(dòng)態(tài)面板left底部放一個(gè)帶邊框的矩形背景腔长，大小為202px*202px袭祟，在矩形背景的上面部分放待選城市文本標(biāo)簽，用于顯示待選城市的計(jì)數(shù)捞附。最終左側(cè)待選項(xiàng)列表元件數(shù)據(jù)顯示如下：
準(zhǔn)備右側(cè)已選項(xiàng)列表數(shù)據(jù)
? ? 右側(cè)已選項(xiàng)列表數(shù)據(jù)的實(shí)現(xiàn)原理與左側(cè)一致榕酒，差異部分在于右側(cè)已選項(xiàng)數(shù)據(jù)一開(kāi)始為空，最終顯示如下：
設(shè)置全局變量故俐，臨時(shí)存放選中項(xiàng)
? ? 設(shè)置全局變量“select_listl”，用來(lái)臨時(shí)存放左側(cè)待選項(xiàng)選中的數(shù)據(jù)紊婉；全局變量“select_listr”药版，用來(lái)臨時(shí)存放右側(cè)已選項(xiàng)選中的數(shù)據(jù)；全局變量的默認(rèn)初始值均為空值喻犁。
待選項(xiàng)點(diǎn)擊交互事件
? ? 待選項(xiàng)矩形框用來(lái)顯示待選項(xiàng)數(shù)據(jù)列表槽片，分別設(shè)置鼠標(biāo)懸停、鼠標(biāo)放下肢础、選中時(shí)的交互效果还栓。
? ? 鼠標(biāo)單擊待選項(xiàng)矩形框時(shí)，切換選中狀態(tài)传轰。當(dāng)待選項(xiàng)狀態(tài)為選中時(shí)剩盒，將全局變量"select_listl"的值設(shè)置為待選項(xiàng)的值，同時(shí)標(biāo)記該行慨蛙；當(dāng)待選項(xiàng)狀態(tài)為取消選中時(shí)辽聊，將全局變量"select_listl"的值設(shè)置未空，同時(shí)取消標(biāo)記該行期贫；
設(shè)置待選城市文本標(biāo)簽事件
? ? 中繼器left的的數(shù)量值等于可選項(xiàng)的數(shù)據(jù)值跟匆，中繼器每項(xiàng)加載時(shí)，設(shè)置待選城市的文本顯示為“待選城市（可選[[Item.Repeater.dataCount]]項(xiàng)）”
? ? 中繼器賦值方法如下通砍，文本格式為“富文本”
[[Item.Repeater.dataCount]]表示中繼器的數(shù)量值玛臂，利用富文本特性改變選項(xiàng)值的文本顏色
待選項(xiàng)點(diǎn)擊交互事件
? ? 已選項(xiàng)點(diǎn)擊交互事件同待選項(xiàng)點(diǎn)擊交互事件一致，此處不再重復(fù)
設(shè)置待選城市文本標(biāo)簽事件
? ??已選城市文本標(biāo)簽設(shè)置與待選城市文本標(biāo)簽設(shè)置一致，此處不再重復(fù)
左側(cè)向右選擇點(diǎn)擊事件
? ? 點(diǎn)擊“l(fā)eft_sl”按鈕時(shí)迹冤，需要判斷該點(diǎn)擊事件是否為有效點(diǎn)擊事件讽营。
? ? 左側(cè)待選項(xiàng)有選中狀態(tài)時(shí)，全局變量“select_listl”不為空叁巨，點(diǎn)擊事件有效斑匪，需要將該選項(xiàng)選中添加到右側(cè)已選項(xiàng)列表中，同時(shí)刪除待選項(xiàng)列表中的記錄锋勺，表示選擇該選項(xiàng)值蚀瘸。特別注意：此處需要將待選項(xiàng)及已選項(xiàng)的狀態(tài)設(shè)置為“未選中”
? ? 當(dāng)左側(cè)待選項(xiàng)沒(méi)有選中狀態(tài)時(shí)，點(diǎn)擊事件無(wú)效庶橱，提示“請(qǐng)從待選城市選擇數(shù)據(jù)項(xiàng)贮勃！”
右側(cè)向左選擇點(diǎn)擊事件
? ? 點(diǎn)擊“right_sl”按鈕時(shí)，需要判斷該點(diǎn)擊事件是否為有效點(diǎn)擊事件苏章。
右側(cè)已選項(xiàng)有選中狀態(tài)時(shí)寂嘉，全局變量“select_listr”不為空，點(diǎn)擊事件有效枫绅，需要將該選項(xiàng)選中添加到左側(cè)待選項(xiàng)列表中泉孩，同時(shí)刪除已選項(xiàng)列表中的記錄，表示取消該選項(xiàng)值并淋。特別注意：此處需要將待選項(xiàng)及已選項(xiàng)的狀態(tài)設(shè)置為“未選中”
? ? 當(dāng)右側(cè)已選項(xiàng)沒(méi)有選中狀態(tài)時(shí)寓搬，點(diǎn)擊事件無(wú)效，提示“請(qǐng)從已選城市選擇數(shù)據(jù)項(xiàng)县耽！”
實(shí)用小技巧：利用顯示事件的“燈箱效果”句喷，背景色為黑色，透明度設(shè)置為20%兔毙。提示效果很漂亮唾琼。
本案例已完成，點(diǎn)擊QQ群“532261671”獲取源文件澎剥；
更多案例請(qǐng)點(diǎn)擊http://www.pmgod.cn?查看锡溯。
