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

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

原型設(shè)計工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)
- 類型:輔助設(shè)計
- 大?。?/span>90.5MB
- 語言:簡體中文
- 時間:2018-05-24
1、首先我們需要兩個中繼器作為左中繼器和右中繼器,分別加入三個選項
左中繼器:選項一、選項二、選項三,
右中繼器:選項四、選項五、選項六,
并將中繼器的值賦予左中繼器_選項,右中繼器同理,關(guān)于選項的樣式各位網(wǎng)友根據(jù)自己的心意來哈。
2、接著我們要利用交互實現(xiàn)當(dāng)鼠標(biāo)懸停時對應(yīng)矩形框變色,選中時的效果方框為藍色并打鉤。這里打鉤選項我用的是圖片,即在選中數(shù)據(jù)時顯示該圖片,網(wǎng)友可以去找SVG的圖標(biāo)。
3、然后我們設(shè)計移入移出的兩個按鈕,設(shè)置鼠標(biāo)懸停效果
4、接著我們要實現(xiàn)兩個中繼器的右移左移,這里可以理解為當(dāng)點擊右移按鈕時,數(shù)據(jù)在左中繼器刪除了這一行,在右中繼器中增加了這一行。先做刪除行的效果,以加入右側(cè)按鈕為例,點擊時我們需要刪除左中繼器的選中行,因此我們需要在左中繼器的單擊事件中加入判斷,如果選中了則標(biāo)記行,取消選中則取消標(biāo)記行,如下圖。
5、以加入右側(cè)按鈕為例,我們要實現(xiàn)點擊時刪除數(shù)據(jù)并移動該條選中數(shù)據(jù)至右中繼器,刪除數(shù)據(jù)的效果前面我們已經(jīng)做了,接下來是在點擊加入右側(cè)按鈕在右中繼器新增行。這個時候我們需要用到全局變量,將需要右移的數(shù)據(jù)存儲進去,然后使右中繼器獲取數(shù)據(jù)
1)在左中繼器標(biāo)記行時同時將數(shù)據(jù)存儲進全局變量
2)在點擊加入右側(cè)按鈕時添加在右中繼器添加行,行數(shù)據(jù)為該全局變量的交互
6、以上步驟做完后穿梭框的功能就基本完成。接下來網(wǎng)友們再根據(jù)自己的需要為穿梭框進行美化就OK啦~
以上就是Axure中繼器制作穿梭框效果的教程,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
相關(guān)文章
- Axure怎么設(shè)計絕對位置的滑屏插件原型?Axure中想要直走一些網(wǎng)頁原型,該怎么制作絕對位置的滑屏插件呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-12-04
Axure怎么制作翻轉(zhuǎn)效果的手機引導(dǎo)頁?
Axure怎么制作翻轉(zhuǎn)效果的手機引導(dǎo)頁?Axure中想要制作一個引導(dǎo)頁,該怎么制作翻轉(zhuǎn)效果的引導(dǎo)頁呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-12-03- Axure怎么制作滑動引導(dǎo)頁效果的原型?Axure中設(shè)計網(wǎng)頁原型很簡單,想要制作一個華東的引導(dǎo)頁,該怎么制作這個動搖交互效果呢?需要的朋友可以參考下2018-12-03
- Axure怎么通過變量方式獲取輸入框中的值?Axure輸入框中輸入的數(shù)值想要獲取,該怎么獲取呢?下面我們就來看看Axure中獲取輸入框中數(shù)據(jù)的教程,需要的朋友可以參考下2018-12-03
- Axure圖片顯示不完整或扭曲該怎么解決?Axure中插入的圖片發(fā)現(xiàn)只顯示上半部分,其他的不顯示,該怎么解決呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-12-02
Axure怎么設(shè)計調(diào)整屏幕亮度效果的效果?
Axure怎么設(shè)計調(diào)整屏幕亮度效果的效果?Axure設(shè)計網(wǎng)頁原型很簡單,想要制作一個調(diào)整屏幕亮度的交互效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-11-30- Axure怎么制作手機充話費的界面效果?經(jīng)常使用網(wǎng)絡(luò)充值話費,想要制作話費充值頁面,該怎么制作呢?下面我們就來看看axure制作話費充值界面的教程,需要的朋友可以參考下2018-11-29
- Axure中繼器怎么制作飯店菜譜?Axure中想要制作飯店的菜譜,該怎么制作呢?下面我們就來看看Axure使用中繼器制作菜譜的教程,需要的朋友可以參考下2018-11-29
Axure怎么制作按鈕控制數(shù)據(jù)遞加遞減效果?
Axure怎么制作按鈕控制數(shù)據(jù)遞加遞減效果?Axure中想要制作一個數(shù)字遞加遞減的效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-11-28- Axure怎么制作文字滾動的動態(tài)效果?Axure中想要制作一個滾動字幕,該怎么給文字添加滾動效果呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-11-28