Axure中繼器怎么制作穿梭框效果?
我要評論Axure的中繼器除了進行列表的增刪改外，還可以利用它來實現(xiàn)一些比較復雜的組件，例如穿梭框，這該怎么制作穿梭框呢？下面我們就來看看詳細的教程。
1、首先我們需要兩個中繼器作為左中繼器和右中繼器，分別加入三個選項
左中繼器：選項一、選項二、選項三，
右中繼器：選項四、選項五、選項六，
并將中繼器的值賦予左中繼器_選項，右中繼器同理，關于選項的樣式各位網(wǎng)友根據(jù)自己的心意來哈。
2、接著我們要利用交互實現(xiàn)當鼠標懸停時對應矩形框變色，選中時的效果方框為藍色并打鉤。這里打鉤選項我用的是圖片，即在選中數(shù)據(jù)時顯示該圖片，網(wǎng)友可以去找SVG的圖標。
3、然后我們設計移入移出的兩個按鈕，設置鼠標懸停效果
4、接著我們要實現(xiàn)兩個中繼器的右移左移，這里可以理解為當點擊右移按鈕時，數(shù)據(jù)在左中繼器刪除了這一行，在右中繼器中增加了這一行。先做刪除行的效果，以加入右側按鈕為例，點擊時我們需要刪除左中繼器的選中行，因此我們需要在左中繼器的單擊事件中加入判斷，如果選中了則標記行，取消選中則取消標記行，如下圖。
5、以加入右側按鈕為例，我們要實現(xiàn)點擊時刪除數(shù)據(jù)并移動該條選中數(shù)據(jù)至右中繼器，刪除數(shù)據(jù)的效果前面我們已經(jīng)做了，接下來是在點擊加入右側按鈕在右中繼器新增行。這個時候我們需要用到全局變量，將需要右移的數(shù)據(jù)存儲進去，然后使右中繼器獲取數(shù)據(jù)
1）在左中繼器標記行時同時將數(shù)據(jù)存儲進全局變量
2）在點擊加入右側按鈕時添加在右中繼器添加行，行數(shù)據(jù)為該全局變量的交互
6、以上步驟做完后穿梭框的功能就基本完成。接下來網(wǎng)友們再根據(jù)自己的需要為穿梭框進行美化就OK啦~
以上就是Axure中繼器制作穿梭框效果的教程，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
相關文章
Axure怎么設計絕對位置的滑屏插件原型？Axure中想要直走一些網(wǎng)頁原型，該怎么制作絕對位置的滑屏插件呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-12-04
Axure怎么制作翻轉效果的手機引導頁？Axure中想要制作一個引導頁，該怎么制作翻轉效果的引導頁呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-12-03
Axure怎么制作滑動引導頁效果的原型？Axure中設計網(wǎng)頁原型很簡單，想要制作一個華東的引導頁，該怎么制作這個動搖交互效果呢？需要的朋友可以參考下2018-12-03
Axure怎么通過變量方式獲取輸入框中的值？Axure輸入框中輸入的數(shù)值想要獲取，該怎么獲取呢？下面我們就來看看Axure中獲取輸入框中數(shù)據(jù)的教程，需要的朋友可以參考下2018-12-03
Axure圖片顯示不完整或扭曲該怎么解決？Axure中插入的圖片發(fā)現(xiàn)只顯示上半部分，其他的不顯示，該怎么解決呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-12-02
Axure怎么設計調整屏幕亮度效果的效果？Axure設計網(wǎng)頁原型很簡單，想要制作一個調整屏幕亮度的交互效果，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-11-30
Axure怎么制作手機充話費的界面效果？經(jīng)常使用網(wǎng)絡充值話費，想要制作話費充值頁面，該怎么制作呢？下面我們就來看看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
