用中繼器做穿梭框
發(fā)布時間:2022-03-12 10:53 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 1791

穿梭框是常用的一個選擇器,它使用直觀方式在左右列表框移動數(shù)據(jù),實現(xiàn)數(shù)據(jù)的多項選擇。

所以今天和大家分享如何用中繼器做一個高保真的穿梭框原型,本教程主要是講解兩個中繼器的聯(lián)動交互,屬于中高級教程。

1、材料準(zhǔn)備

中繼器(內(nèi)含矩形)*2;背景框*2;左箭頭*1;右箭頭*2;文本*2,如下圖所示擺放;

中繼器內(nèi)的矩形需要取消邊框,然后設(shè)置鼠標(biāo)移入時填充顏色為灰色,選中時填充顏色為藍(lán)色,這樣會有更好的交互感。

背景框置于底層,調(diào)整合適的大小和位置即可。

左邊的為未選項中繼器1,在中繼器表格內(nèi)填寫對應(yīng)選項文字;然后復(fù)制到右面,為已選項中繼器2,由于已選項默認(rèn)為0,所以需要刪除中繼器所有行,默認(rèn)空值即可。

中繼器1和2均需取消隔離選項組和隔離單選按鈕組效果,兩個中繼器內(nèi)的矩形需要設(shè)置單選組。

文本元件命名為邏輯1和邏輯2,默認(rèn)為空且隱藏,后續(xù)用于邏輯交互

2、交互設(shè)置

中繼器1每項載入時:

設(shè)置中繼器1內(nèi)矩形文字為列表Column0的值,這個交互是中繼器默認(rèn)設(shè)置的。

中繼器1內(nèi)矩形鼠標(biāo)單擊時:

選中當(dāng)前元件:因為之前我們設(shè)置了選中的顏色變藍(lán),所以這樣做以后,就可以知道選中了那一項,而且因為設(shè)置了單選組,所以也不會同時選中多個。

設(shè)置邏輯1的文本為列表Column0的值:這里其實就是把選中的值記錄下來,方便后面左右箭頭穿梭的操作

中繼器2每項加載時及內(nèi)部矩形鼠標(biāo)單擊時:

交互和中繼器1一致,不過需要注意的是,中繼器2里面設(shè)置的文本是邏輯2的文本。

右箭頭鼠標(biāo)單擊時:

這里需要判斷邏輯1的文字是否為空,如果為空就是還沒選中,就不發(fā)生交互,如果不為空,就需要做一個增加行和刪除行的交互。

增加行:在中繼器2里增加行,增加的值為邏輯1文本值

刪除行:刪除中繼器1里的和邏輯1文本值相同的行

完成上述兩個交互之后,我們還需要清空邏輯1的文本,因為如果不清空,我們點右箭頭就可以無限增加同一個選項,所以這里需要清空邏輯1的文本值。

左箭頭鼠標(biāo)單擊時:

左箭頭和右箭頭的交互其實是一個道理的,首先需要判斷邏輯2的文本是否為空,如果為空就是還沒選中,就不發(fā)生交互,如果不為空,就需要做一個增加行和刪除行的交互,不過這里和中繼器1的交互是反過來的

增加行:在中繼器1里增加行,增加的值為邏輯2文本值

刪除行:刪除中繼器2里的和邏輯2文本值相同的行

設(shè)置邏輯2的文本值為空值

那這樣一個實用的穿梭框原型就制作完成了。

完成之后,以后我們需要使用的話,只需要填寫在左邊中繼器1的表格里填寫選項文字即可,方便使用,小提示,如果選項多的話可以在excel表格復(fù)制粘貼到中繼器表格里哦

UI交互app及axure設(shè)計教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機(jī)械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC