欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

百度經(jīng)驗   發(fā)布時間:2019-11-30 14:03:12   作者:shl020213   我要評論
Axure中繼器怎么制作穿梭框效果?Axure經(jīng)常制作網(wǎng)頁原型,想要制作一個穿梭框的效果,該怎么制作你額?下面我們就來看看詳細的教程,需要的朋友可以參考下

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

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)推薦:

Axure怎么制作點擊彈框效果?

Axure怎么制作加載動畫中的圓環(huán)?

axure怎么制作頁面標(biāo)簽切換的效果?

相關(guān)文章

  • Axure怎么設(shè)計絕對位置的滑屏插件原型?

    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怎么制作滑動引導(dǎo)頁效果的原型?Axure中設(shè)計網(wǎng)頁原型很簡單,想要制作一個華東的引導(dǎo)頁,該怎么制作這個動搖交互效果呢?需要的朋友可以參考下
    2018-12-03
  • Axure怎么通過變量方式獲取輸入框中的值?

    Axure怎么通過變量方式獲取輸入框中的值?Axure輸入框中輸入的數(shù)值想要獲取,該怎么獲取呢?下面我們就來看看Axure中獲取輸入框中數(shù)據(jù)的教程,需要的朋友可以參考下
    2018-12-03
  • Axure圖片顯示不完整或扭曲該怎么解決?

    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怎么制作手機充話費的界面效果?

    Axure怎么制作手機充話費的界面效果?經(jīng)常使用網(wǎng)絡(luò)充值話費,想要制作話費充值頁面,該怎么制作呢?下面我們就來看看axure制作話費充值界面的教程,需要的朋友可以參考下
    2018-11-29
  • Axure中繼器怎么制作飯店菜譜?

    Axure中繼器怎么制作飯店菜譜?Axure中想要制作飯店的菜譜,該怎么制作呢?下面我們就來看看Axure使用中繼器制作菜譜的教程,需要的朋友可以參考下
    2018-11-29
  • Axure怎么制作按鈕控制數(shù)據(jù)遞加遞減效果?

    Axure怎么制作按鈕控制數(shù)據(jù)遞加遞減效果?Axure中想要制作一個數(shù)字遞加遞減的效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-11-28
  • Axure怎么制作文字滾動的動態(tài)效果?

    Axure怎么制作文字滾動的動態(tài)效果?Axure中想要制作一個滾動字幕,該怎么給文字添加滾動效果呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-11-28

最新評論