Axure中繼器怎么制作穿梭框效果?

百度經(jīng)驗(yàn) 發(fā)布時(shí)間：2019-11-30 14:03:12 作者：shl020213

我要評論

Axure中繼器怎么制作穿梭框效果？Axure經(jīng)常制作網(wǎng)頁原型，想要制作一個(gè)穿梭框的效果，該怎么制作你額？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

Axure的中繼器除了進(jìn)行列表的增刪改外，還可以利用它來實(shí)現(xiàn)一些比較復(fù)雜的組件，例如穿梭框，這該怎么制作穿梭框呢？下面我們就來看看詳細(xì)的教程。

原型設(shè)計(jì)工具Axure RP Pro 8.1特別版中文漢化特別版(附漢化包+注冊碼+安裝教程)

類型：輔助設(shè)計(jì)
大?。?/span>90.5MB
語言：簡體中文
時(shí)間：2018-05-24

查看詳情

1、首先我們需要兩個(gè)中繼器作為左中繼器和右中繼器，分別加入三個(gè)選項(xiàng)

左中繼器：選項(xiàng)一、選項(xiàng)二、選項(xiàng)三，

右中繼器：選項(xiàng)四、選項(xiàng)五、選項(xiàng)六，

并將中繼器的值賦予左中繼器_選項(xiàng)，右中繼器同理，關(guān)于選項(xiàng)的樣式各位網(wǎng)友根據(jù)自己的心意來哈。

2、接著我們要利用交互實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停時(shí)對應(yīng)矩形框變色，選中時(shí)的效果方框?yàn)樗{(lán)色并打鉤。這里打鉤選項(xiàng)我用的是圖片，即在選中數(shù)據(jù)時(shí)顯示該圖片，網(wǎng)友可以去找SVG的圖標(biāo)。

3、然后我們設(shè)計(jì)移入移出的兩個(gè)按鈕，設(shè)置鼠標(biāo)懸停效果

4、接著我們要實(shí)現(xiàn)兩個(gè)中繼器的右移左移，這里可以理解為當(dāng)點(diǎn)擊右移按鈕時(shí)，數(shù)據(jù)在左中繼器刪除了這一行，在右中繼器中增加了這一行。先做刪除行的效果，以加入右側(cè)按鈕為例，點(diǎn)擊時(shí)我們需要?jiǎng)h除左中繼器的選中行，因此我們需要在左中繼器的單擊事件中加入判斷，如果選中了則標(biāo)記行，取消選中則取消標(biāo)記行，如下圖。

5、以加入右側(cè)按鈕為例，我們要實(shí)現(xiàn)點(diǎn)擊時(shí)刪除數(shù)據(jù)并移動(dòng)該條選中數(shù)據(jù)至右中繼器，刪除數(shù)據(jù)的效果前面我們已經(jīng)做了，接下來是在點(diǎn)擊加入右側(cè)按鈕在右中繼器新增行。這個(gè)時(shí)候我們需要用到全局變量，將需要右移的數(shù)據(jù)存儲(chǔ)進(jìn)去，然后使右中繼器獲取數(shù)據(jù)

1）在左中繼器標(biāo)記行時(shí)同時(shí)將數(shù)據(jù)存儲(chǔ)進(jìn)全局變量

2）在點(diǎn)擊加入右側(cè)按鈕時(shí)添加在右中繼器添加行，行數(shù)據(jù)為該全局變量的交互