免费人成动漫在线播放r18-免费人成观看在线网-免费人成黄页在线观看日本-免费人成激情视频在线观看冫-jlzzjlzz亚洲大全-jlzzjlzz亚洲日本

二維碼
企資網

掃一掃關注

當前位置: 首頁 » 企資頭條 » 專題 » 正文

Axure教程——多選穿梭框

放大字體  縮小字體 發布日期:2023-03-12 12:02:35    作者:江尤斐    瀏覽次數:76
導讀

編輯導語:穿梭框可以從一堆選項中選出所需要的選項,是系統中常用的選擇器。本文作者分享了如何在Axure中制作高保真的多選穿梭框的原型模板,一起來學習一下吧。穿梭框是系統中常用的選擇器,它可以從一堆選項中選

編輯導語:穿梭框可以從一堆選項中選出所需要的選項,是系統中常用的選擇器。本文作者分享了如何在Axure中制作高保真的多選穿梭框的原型模板,一起來學習一下吧。

穿梭框是系統中常用的選擇器,它可以從一堆選項中選出所需要的選項。那今天我們講一下在Axure中如何制作高保真的多選穿梭框的原型模板。

制作完成之應具備以下交互效果:

    在可選欄目選項中可以選擇多個選項,選中后點擊右箭頭可以設置到已選欄目在已選欄目選項中可以選擇多個選項,選中后點擊左箭頭可以取消選擇,并恢復到未選欄目可選欄目和已選欄目都可以通過模糊搜索快速查詢選項

原型地址:https://hipr0y.axshare.com/#g=1

一、用中繼器制作選擇器

我們先做左邊的選擇器,用中繼器來制作選擇器,中繼器內部默認自帶一個矩形元件,我們按需求修改矩形的樣式、和尺寸,我們需要注意的是要增加一個選中的交互樣式,這樣就可以通過選中變色看出已經選中了設么選項。

在中繼器表格里,默認自帶一列column0,在這列里我們填寫選項名稱,然后在底部加個邊框矩形,完成后如下入所示:

然后我們在中繼器增加1列,xuanzhong列,默認為空即可。這列的作用就是用于記錄哪些選項被選中,我們這里制定一個規則,如果對應該xuanzhong列的值等于1就是被選中,否則就沒有被選中。

所以我們要在中繼器每項加載時添加交互,如果選中列的值等于1,我們就用設置選中的交互,將該行選項矩形設置為真。

那如果鼠標單擊選項時,我們分兩種情況添加交互,如果該行xuanzhong列的值=1,那么相當于從選中變成未選中,我們直接更新當前行的xuanzhong的值為0即可;如果該行xuanzhong列的值不等于1,那么相當于從未選中變成選中,我們直接更新當前行xuanzhong列的值為1。

完成之后我們還要增加一列xianshi,這列的作用是控制對應行內容是否顯示。我們在中繼器每項加載時增加判斷條件,如果顯示列的值不等于1,那么我們就用隱藏事件,隱藏該行選項。

二、制作模糊搜索效果

我們用一個輸入框和搜索按鈕,制作一個搜索框,如下圖所示:

點擊搜索按鈕時,我們用篩選事件,對中繼器進行篩選,篩選條件就是,中繼器里第一列選項文字包含輸入框里的文字,如果axure10的話可以在條件里直接選包含;如果Axure9及以下的話,就要用到indexof函數,如果得出結果大于-1就是包含的意思了。

三、復制出已選欄目

上面我們做好左邊未選欄目的元件后,可以將中繼器和搜索框各復制一個到右面。復制到右面的的中繼器里的xianshi列默認值要改成0,因為右面默認是沒有選項的。

然后在兩個中繼器選項點擊時的兩個條件,前面是更新當前行xuanzhong列的值,如果未選中就更新為1,如果選中的話就更新為0,這里我們在更新的時候要把另外一個中繼器也以前更新,就是說如果選中一個選項,就兩個中繼器的該選項都要選中,如果取消選中該選項,就兩個中繼器的該選項都取消選中。

四、左右按鈕穿梭的交互

點擊右箭頭,就是要將左邊選中的選項傳遞到右邊,那么我們只要用更新行更新兩個中繼器,左邊的我們把xuanzhong列=1的行對應的xianshi列的值設置為0,那么左邊中繼器選中的行就會自動隱藏。

右邊的中繼器我們把xuanzhong列=1的行對應的xianshi列的值設置為1,那右邊中繼器選中的行就會自動顯示。最后我們還要把兩個中繼器里xuanzhong列的值恢復設置為0。

那左鍵頭其實也是一樣的道理,只不過是從原來將左邊選中的選項傳遞到右邊,變成從右邊選中的選項傳遞回左邊。

簡單來說就是更新右面已選中行的xianzhi列值為0,這樣就可以在右邊的中繼器里隱藏該選項;最后再更新左邊中繼器里選中行的xianzhi列值為1,這樣就可以在左邊顯示了。

那么以上就是Axure高保真原型——多選穿梭框的制作教程了,感謝您的閱讀,我們下期見,88~

本文由 @Axure高保真原型 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

 
(文/江尤斐)
打賞
免責聲明
本文為江尤斐推薦作品?作者: 江尤斐。歡迎轉載,轉載請注明原文出處:http://www.bangpiao.com.cn/news/show-326707.html 。本文僅代表作者個人觀點,本站未對其內容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內容,一經發現,立即刪除,作者需自行承擔相應責任。涉及到版權或其他問題,請及時聯系我們郵件:weilaitui@qq.com。
 

Copyright ? 2016 - 2023 - 企資網 48903.COM All Rights Reserved 粵公網安備 44030702000589號

粵ICP備16078936號

微信

關注
微信

微信二維碼

WAP二維碼

客服

聯系
客服

聯系客服:

在線QQ: 303377504

客服電話: 020-82301567

E_mail郵箱: weilaitui@qq.com

微信公眾號: weishitui

客服001 客服002 客服003

工作時間:

周一至周五: 09:00 - 18:00

反饋

用戶
反饋

主站蜘蛛池模板: 干干干操操操 | 青青青国产色视频在线观看 | 亚洲九九九 | 激情四月婷婷 | 精品无码一区在线观看 | 97国产精品视频观看一 | 国产剧情一区二区 | 黄色a视频在线观看 | 日本三级香港三级少妇 | 国产欧美性综合视频性刺激 | 日韩午夜高清福利片在线观看 | 窝窝人体色www| 涩涩涩丁香色婷五月网视色 | 成人精品视频一区二区三区尤物 | 成人黄色在线视频 | 日韩黄色一级视频 | x8x8国产日韩欧美 | 日本三级视频在线播放 | chinese老妇videos| 日韩在线1 | 男女视频在线看 | 好男人在线社区www在线视频一 | 全黄毛片 | 日本免费一二区视频 | 欧美成人区 | 97公开免费视频 | 久久国产午夜精品理论片34页 | 黄色一级视频在线观看 | 手机看片亚洲 | 在线观看免费精品国产 | 免费黄色的网站 | 国产制服| 欧美中文字幕一区二区三区 | 成人免费视频一区 | 成人在线观看免费视频 | 免费a在线观看播放 | 日日摸夜夜爽夜夜爽出水 | 午夜伦理在线播放 | 日韩亚洲欧美综合 | 春意影院午夜爽爽爽免费 | 欧美双茎同入视频在线观看 |