久久精品女人天堂AV免费观看,欧美日韩精品成人网视频

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

穿梭器：雙向列表帶計(jì)數(shù)選擇

十月大神

2018-12-27

0 評(píng)論 6150 瀏覽 21 收藏

13 分鐘

前段時(shí)間分享過一個(gè)支持單選的穿梭器（列表框左右雙向選擇）案例，很多朋友覺得很贊，同時(shí)也想進(jìn)一步學(xué)習(xí)并掌握支持單選、多選、全選的穿梭器交互制作。作者將通過這篇案列分享，教大家使用Axure制作實(shí)現(xiàn)“穿梭器：雙向列表帶計(jì)數(shù)選擇（支持單選、多選和全選）”。

一、演示地址

穿梭器：雙向列表帶計(jì)數(shù)選擇（支持單選、多選和全選）

二、實(shí)現(xiàn)效果

雙向列表均支持單選、多選或全選；
移入選項(xiàng)、點(diǎn)擊選項(xiàng)時(shí)分別有文字顏色或背景色的變化，突出選項(xiàng)；
如果左側(cè)選項(xiàng)沒有選中，點(diǎn)擊向右選擇時(shí)，出現(xiàn)錯(cuò)誤提示信息；
如果右側(cè)選項(xiàng)沒有選中，點(diǎn)擊向左選擇時(shí)，出現(xiàn)錯(cuò)誤提示信息；
點(diǎn)擊全部選擇時(shí)，左側(cè)數(shù)據(jù)全部移入右側(cè)；點(diǎn)擊全部取消時(shí)，右側(cè)數(shù)據(jù)全部移入左側(cè)；
每次選擇變動(dòng)后，可選項(xiàng)和已選項(xiàng)的數(shù)據(jù)都會(huì)相應(yīng)變化；
當(dāng)可選項(xiàng)或已選項(xiàng)為0時(shí)，可選項(xiàng)和已選項(xiàng)的數(shù)據(jù)也能正確顯示。

三、原理分析

提供左右兩個(gè)列表框，兩邊的數(shù)據(jù)內(nèi)容一致，數(shù)據(jù)是否顯示的狀態(tài)互斥；
左邊為待選項(xiàng)的容器，初始狀態(tài)全部為1，表示全部可見；
右側(cè)為已選項(xiàng)的容器，初始狀態(tài)全部為0，表示全部不可見；
當(dāng)選中左邊的選項(xiàng)，確認(rèn)執(zhí)行選擇時(shí)，將左邊選中項(xiàng)狀態(tài)設(shè)置為0，同時(shí)將右邊對(duì)應(yīng)的選項(xiàng)設(shè)置為1；
執(zhí)行完成后，左邊選中的數(shù)據(jù)隱藏，右邊顯示左側(cè)隱藏的數(shù)據(jù)；
取消選擇的方法原理相同；
點(diǎn)擊全部選擇時(shí)，將左側(cè)所有數(shù)據(jù)狀態(tài)全部設(shè)置為0，同時(shí)將右邊全部數(shù)據(jù)狀態(tài)設(shè)置為1（不需考慮之前的數(shù)據(jù)顯示狀態(tài)）；
執(zhí)行非全選時(shí)，如果沒有選擇數(shù)據(jù)項(xiàng)，則給出錯(cuò)誤提示即可；

注：單選穿梭器案例是采用變量賦值方法制作，由于中繼器不支持同時(shí)插入多條數(shù)據(jù)，故多選案例不能用變量方法實(shí)現(xiàn)。

四、元件準(zhǔn)備

待選城市文本標(biāo)簽，用于顯示待選城市的計(jì)數(shù)
待選項(xiàng)背景框（left_bg），放在待選項(xiàng)底部
待選項(xiàng)動(dòng)態(tài)面板(left)，用來存放可供選擇的列表項(xiàng)；left面板中包含一個(gè)動(dòng)態(tài)面板，放置中繼器left；中繼器left中用來存儲(chǔ)可供選擇的列表項(xiàng)
選項(xiàng)矩形（left_sl），觸發(fā)左側(cè)待選項(xiàng)移入右側(cè)已選項(xiàng)
選項(xiàng)矩形（right_sl），觸發(fā)右側(cè)已選項(xiàng)移入左側(cè)待選項(xiàng)
選項(xiàng)矩形（全部選擇），觸發(fā)左側(cè)待選項(xiàng)全部移入右側(cè)已選項(xiàng)
選項(xiàng)矩形（全部取消），觸發(fā)右側(cè)已選項(xiàng)全部移入左側(cè)待選項(xiàng)
已選城市文本標(biāo)簽，用于顯示已選城市的計(jì)數(shù)
已選項(xiàng)背景框（right_bg），放在已選項(xiàng)底部
已選項(xiàng)動(dòng)態(tài)面板(right)，用來存放已經(jīng)選擇的列表項(xiàng)；right面板中包含一個(gè)動(dòng)態(tài)面板，放置中繼器right；中繼器right用來存儲(chǔ)已經(jīng)選擇的列表項(xiàng)
操作提示組合元件，用于沒有選擇選項(xiàng)時(shí)的錯(cuò)誤

隱藏提示文件，重新布局元件后效果如下：

五、實(shí)現(xiàn)步驟

1. 準(zhǔn)備左側(cè)待選項(xiàng)列表數(shù)據(jù)

拖入一個(gè)中繼器left，中繼器存儲(chǔ)city、state兩列數(shù)據(jù)，city列添加21條數(shù)據(jù)，對(duì)應(yīng)顯示廣東省21個(gè)地市，state列全部為1（此處1表示可見）：

將中繼器的數(shù)據(jù)通過每項(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)條屬性為“無”，從而可以實(shí)現(xiàn)滾動(dòng)且隱藏滾動(dòng)條的效果。

在動(dòng)態(tài)面板left底部放一個(gè)帶邊框的矩形背景，大小為202px*202px，在矩形背景的上面部分放待選城市文本標(biāo)簽，用于顯示待選城市的計(jì)數(shù)。最終左側(cè)待選項(xiàng)列表元件數(shù)據(jù)顯示如下：

2. 準(zhǔn)備右側(cè)已選項(xiàng)列表數(shù)據(jù)

拖入一個(gè)中繼器right，中繼器存儲(chǔ)city、state兩列數(shù)據(jù)，city列添加21條數(shù)據(jù)，對(duì)應(yīng)顯示廣東省21個(gè)地市，state列全部為0（此處0表示不可見）

右側(cè)其余的實(shí)現(xiàn)原理與左側(cè)一致，最終右側(cè)已選項(xiàng)列表元件數(shù)據(jù)顯示如下：

3. 設(shè)置全局變量，臨時(shí)存放選中項(xiàng)

設(shè)置全局變量“select_listl”，用來臨時(shí)存放左側(cè)待選項(xiàng)選中的數(shù)據(jù)；全局變量“select_listr”，用來臨時(shí)存放右側(cè)已選項(xiàng)選中的數(shù)據(jù)；全局變量的默認(rèn)初始值均為空值。

4. 待選項(xiàng)點(diǎn)擊交互事件

待選項(xiàng)矩形框用來顯示待選項(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è)置為“當(dāng)前值+1”，同時(shí)標(biāo)記該行；當(dāng)待選項(xiàng)狀態(tài)為取消選中時(shí)，將全局變量”select_listl”的值設(shè)置為“當(dāng)前值-1”

5. 設(shè)置待選城市文本標(biāo)簽事件

中繼器left的的數(shù)量值等于可選項(xiàng)的數(shù)據(jù)值，中繼器載入時(shí)，需要添加篩選，只顯示state為1 的數(shù)據(jù)。每項(xiàng)加載時(shí)，設(shè)置待選城市的文本顯示為“待選城市（可選[[Item.Repeater.dataCount]]項(xiàng)）”

中繼器賦值方法如下，文本格式為“富文本”

[[Item.Repeater.dataCount]]表示中繼器的數(shù)量值，利用富文本特性改變選項(xiàng)值的文本顏色：

6. 已選項(xiàng)點(diǎn)擊交互事件

已選項(xiàng)點(diǎn)擊交互事件同待選項(xiàng)點(diǎn)擊交互事件一致，此處不再重復(fù)。

7. 設(shè)置已選城市文本標(biāo)簽事件

已選城市文本標(biāo)簽設(shè)置與待選城市文本標(biāo)簽設(shè)置一致，此處不再重復(fù)。

8. 左側(cè)向右選擇點(diǎn)擊事件

點(diǎn)擊“>>”按鈕時(shí)，需要判斷該點(diǎn)擊事件是否為有效點(diǎn)擊事件。

左側(cè)待選項(xiàng)有選中狀態(tài)時(shí)，全局變量“select_listl”不為空，點(diǎn)擊事件有效，需要將左側(cè)選中數(shù)據(jù)的狀態(tài)更新為0，同時(shí)將右側(cè)相同數(shù)據(jù)狀態(tài)更新為1。特別注意：此處需要將待選項(xiàng)及已選項(xiàng)的選中標(biāo)志全部取消

當(dāng)左側(cè)待選項(xiàng)沒有選中狀態(tài)時(shí)，點(diǎn)擊事件無效，提示“請(qǐng)從待選城市選擇數(shù)據(jù)項(xiàng)！”

9. 右側(cè)向左選擇點(diǎn)擊事件

點(diǎn)擊“<<”按鈕時(shí)，需要判斷該點(diǎn)擊事件是否為有效點(diǎn)擊事件。

右側(cè)已選項(xiàng)有選中狀態(tài)時(shí)，全局變量“select_listr”不為空，點(diǎn)擊事件有效，需要將右側(cè)選中數(shù)據(jù)的狀態(tài)更新為0，同時(shí)將左側(cè)相同數(shù)據(jù)狀態(tài)更新為1。特別注意：此處需要將待選項(xiàng)及已選項(xiàng)的選中標(biāo)志全部取消

當(dāng)右側(cè)已選項(xiàng)沒有選中狀態(tài)時(shí)，點(diǎn)擊事件無效，提示“請(qǐng)從已選城市選擇數(shù)據(jù)項(xiàng)！”。

10. 全部選擇點(diǎn)擊事件

點(diǎn)擊“全部選擇”按鈕時(shí)，不管左側(cè)是否選中，也不需要考慮左側(cè)還有多少待選項(xiàng)。直接將左側(cè)所有數(shù)據(jù)狀態(tài)改為0，將右側(cè)所有數(shù)據(jù)狀態(tài)改為1，同時(shí)取消所有數(shù)據(jù)選擇狀態(tài)。

11. 全部取消點(diǎn)擊事件

點(diǎn)擊“全部取消”按鈕時(shí)，不管右側(cè)是否選中，也不需要考慮右側(cè)還有多少已選項(xiàng)。直接將右側(cè)所有數(shù)據(jù)狀態(tài)改為0，將左側(cè)所有數(shù)據(jù)狀態(tài)改為1，同時(shí)取消所有數(shù)據(jù)選擇狀態(tài)。