中繼器實(shí)踐:雙向列表操作
中繼器一直是初學(xué)者比較難以理解的內(nèi)容,而且這個(gè)“中繼器”的名字也是起的很晦澀,連開發(fā)人員第一次見到個(gè)名字時(shí)也是一頭霧水。但是它在一些場(chǎng)合下非常有用,特別是針對(duì)界面上有列表類的數(shù)據(jù)展示。
一、再談中繼器
我們?cè)俅伪M量用比較通俗的語(yǔ)言來(lái)解釋一下中繼器,相信大家都使用過Excel,我們看看下面的數(shù)據(jù)列表:
中繼器是一個(gè)存儲(chǔ)了二維表格數(shù)據(jù)的元件,每行是一條記錄,每條記錄可以設(shè)計(jì)多個(gè)屬性。
上面的表格數(shù)據(jù)看起來(lái)比較枯燥,但是在中繼器里,可以讓這些數(shù)據(jù)顯示出來(lái)更豐富,只在于你如何設(shè)計(jì)界面展示元件,每行數(shù)據(jù)中的每個(gè)數(shù)據(jù)都可以用單獨(dú)的元件來(lái)展示。
默認(rèn)情況下,中繼器只會(huì)展示每條記錄的第一個(gè)屬性,用的是一個(gè)矩形框元件,你在拖動(dòng)一個(gè)中繼器到界面上時(shí),會(huì)自上而下顯示三條數(shù)據(jù),數(shù)據(jù)內(nèi)容為1、2、3,因?yàn)樗锩嬷挥幸粋€(gè)字段Column0,三條數(shù)據(jù):
我們可以編輯這個(gè)樣式,使用多個(gè)不同的元件來(lái)顯示不同的屬性數(shù)據(jù),這樣就會(huì)顯示更豐富,例如像下面這樣(雙擊中繼器,進(jìn)入編輯狀態(tài),添加相關(guān)顯示元件):
二、雙向列表操作實(shí)踐
下面我們通過一個(gè)實(shí)例,學(xué)習(xí)中繼器的操作,完成后的效果圖如下:
選擇左邊的菜單項(xiàng),單擊“添加到右邊>”按鈕,添加數(shù)據(jù)到右側(cè)列表中,同樣,從右側(cè)的列表中選擇菜單項(xiàng),可以添加到左邊,使用了兩個(gè)中繼器實(shí)現(xiàn)上面的雙向操作。點(diǎn)擊這里查看在線演示效果。
1、界面布局
界面布局包括基本布局和用來(lái)提示的提示信息框,基本布局包括兩個(gè)列表、兩個(gè)按鈕。提示信息框是一個(gè)動(dòng)態(tài)面板,里面有一個(gè)矩形框,通過設(shè)置矩形框的樣式和文字來(lái)設(shè)置提示。
1)基本布局
添加兩個(gè)中繼器,分別命名為list1、list2,再添加兩個(gè)矩形框作為按鈕:
設(shè)置矩形框樣式,雙擊中繼器list1,進(jìn)入編輯狀態(tài),設(shè)置默認(rèn)的矩形框的樣式,大小設(shè)置為210*50,無(wú)邊框,背景為白色,右鍵設(shè)置交互樣式,鼠標(biāo)懸停時(shí)背景為灰色,選中狀態(tài)時(shí)為藍(lán)底白字:
確定后,重新選擇中繼器,右鍵設(shè)置選項(xiàng)組,設(shè)置名稱為lista:
同樣設(shè)置list2的樣式和list1相同,設(shè)置選項(xiàng)組名稱為listb(可復(fù)制list1,然后修改選項(xiàng)組名稱為listb)。
2)提示信息框
提示信息框用來(lái)顯示如果沒有從列表中選擇數(shù)據(jù)時(shí),提示用戶。
添加一個(gè)矩形框,命名為tips_text,大小為237*64,設(shè)置背景為半透明的黑色,圓角大小為7,無(wú)邊框:
選中tips_text,右鍵轉(zhuǎn)換為動(dòng)態(tài)面板,命名為tips,設(shè)置一下它的固定到瀏覽器屬性,水平居中,垂直居中:
確定后,選擇動(dòng)態(tài)面板tips,右鍵設(shè)為隱藏狀態(tài),開始時(shí)這個(gè)提示信息不顯示。
2、準(zhǔn)備中繼器的數(shù)據(jù)
設(shè)置中繼器list1的數(shù)據(jù),修改默認(rèn)的1、2、3為新建、打開、保存,再添加兩條數(shù)據(jù)另存為、退出,中繼器list2的數(shù)據(jù)全部刪除,完成后如下:
3、全局變量設(shè)置
添加兩個(gè)全局變量selected_item1、selected_item2,用來(lái)保存兩個(gè)中繼器列表中當(dāng)前被選中的數(shù)據(jù):
4、事件處理
有幾處需要添加事件處理,中繼器每菜單項(xiàng)被單擊時(shí),兩個(gè)添加按鈕。
1)中繼器list1矩形框單擊事件
因?yàn)橹欣^器中只有一個(gè)屬性,所以直接使用默認(rèn)的事件處理顯示數(shù)據(jù)就可以了,無(wú)需修改。
雙擊進(jìn)入中繼器list1,選擇矩形框,添加單擊事件,單擊后高亮顯示:
- 第一步:先取消所有被標(biāo)記的行;
- 第二步:并將當(dāng)前矩形框設(shè)置為選中狀態(tài),這樣顯示為藍(lán)底白字;
- 第三步:將當(dāng)前數(shù)據(jù)行標(biāo)記一下,單擊添加按鈕時(shí),會(huì)取被標(biāo)記的行。
- 第四步:設(shè)置全局變量值為當(dāng)前中繼器的數(shù)據(jù);
2)中繼器list2矩形框單擊事件
同中繼器list1,全局變量設(shè)置為selectd_item2,取消和標(biāo)記行都針對(duì)list2。
3)“添加到右邊 >”按鈕單擊事件
如果全局變量selected_item1為空,則提示用戶沒有選擇數(shù)據(jù),需要先從左邊列表中選擇要移動(dòng)的菜單項(xiàng)。
事件分支一:全局變量selected_item1不等于空。
第一步:為右側(cè)中繼器list2添加一行數(shù)據(jù),注意添加的數(shù)據(jù)就是從左側(cè)中繼器list1中選擇的當(dāng)前行;
第二步:從左側(cè)中繼器list1中刪除標(biāo)記的行,就是用戶單擊選中的行;
第三步:將全局變量重置為空;
事件分支二:全局變量selected_item1等于空。
第一步:設(shè)置提示文字內(nèi)容為“請(qǐng)從左側(cè)選擇菜單項(xiàng)”;
第二步:顯示提示信息tips,淡出效果;提示信息在顯示等待1秒后自動(dòng)隱藏,這是給提示信息動(dòng)態(tài)面板添加顯示事件來(lái)處理的:
4)“< 添加到左邊”按鈕單擊事件
和“添加到右邊 >”按鈕單擊事件類似,只是反向操作,具體事件內(nèi)容請(qǐng)參見源文件。
5)其它事件
為了讓界面更美觀,在頁(yè)面加載時(shí),移動(dòng)界面上的所有元件(將它們?nèi)窟x中,右鍵轉(zhuǎn)換為動(dòng)態(tài)面板,命名為main,這樣就可以整體操作了)到瀏覽器中間位置,具體事件內(nèi)容請(qǐng)參見源文件。
5、預(yù)覽
為了界面更美觀,給中繼器添加了背景邊框和標(biāo)題欄,分別使用矩形框來(lái)模擬:
開始預(yù)覽,按下F5鍵預(yù)覽,從左邊的列表中選擇一條數(shù)據(jù),單擊“添加到右邊>”按鈕,數(shù)據(jù)從左邊列表中刪除,同時(shí)添加到右側(cè)列表中,同理從右側(cè)列表中選擇一條數(shù)據(jù),單擊“<添加到左邊”按鈕,數(shù)據(jù)從右邊列表中刪除,同時(shí)添加到左側(cè)列表中。
本文由 @Axure 原型設(shè)計(jì)工場(chǎng)?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
一堆BUG
1、選項(xiàng)選中后,可以多選,而且都處于選中狀態(tài)。
2、多選后點(diǎn)擊按鈕只能把第一個(gè)選擇的添加進(jìn)去。
3、只要第一次選中一個(gè),之后可以一直點(diǎn)擊按鈕,會(huì)添加object數(shù)值
求源文件,感謝!562392661@qq.com
已實(shí)現(xiàn),謝謝樓主
我在左邊加復(fù)選框,請(qǐng)問怎么把左邊多個(gè)選中復(fù)選框的添加到右邊去?
贊贊贊
求教樓主一個(gè)問題:中繼器的某一列的數(shù)求和相加, 怎么實(shí)現(xiàn)?
為啥我設(shè)置了取消全部標(biāo)記行,但是還是點(diǎn)多少就標(biāo)記多少,,而且如果左右都有標(biāo)記,添加時(shí)有時(shí)會(huì)復(fù)制多一個(gè)。。。
中繼器屬性里面有個(gè) , 隔離選項(xiàng)組效果, 它默認(rèn)是勾選的 ,把它取消掉就行了。
牛逼了我的哥~