如何利用中繼器實現Axure多選樹效果?
本文給大家介紹用一個中繼器實現axure多選樹的效果,一起來看看~
原型預覽地址http://rzcfi5.axshare.cn/#g=1&p=新元件1
工具/原料:
- 中繼器
- 復選框
- 下拉符號
- 選中按鈕
- 取消選中按鈕
- 展開按鈕
- 收起按鈕
- 1級文本標簽
- 2級文本標簽
- type文本標簽
步驟1
添加中繼器:在中繼器里放入下拉符號和多選框。
步驟二
設置中繼器:
type:分1、2、3三個級別,1表示一級(如廣東省),2表示二級(如廣東省—廣州市),3表示(廣東省-廣州市-海珠區)。
memu1:表示第一級菜單
memu2:表示第二級菜單
memu3:表示第三級菜單
xiala:1表示有下拉符號,0表示沒有下拉符號
see:1表示可見,0表示隱藏
xuan:下拉符號的方向,0向右,1向下
xuanzhong:1表示選擇,0表示未選中
步驟3
設置中繼器載入時交互事件。
添加篩選[[Item.see==’1′]]:篩選出see為1(可見)的行
步驟4
設置中繼器每項加載時交互事件。
(1)設置多選框文本和位置
如果是一級菜單,設置多選框文字=memu1
如果是二級菜單,設置多選框文字=memu2,并且移動下拉符號和多選框組合向右移動20
如果是三級菜單,設置多選框文字=memu3,并且移動下拉符號和多選框組合向右移動40
(2)設置下拉符號
如果xiala=0,隱藏下拉符號。
如果xuan=0,下拉符號向右,表示收起下級菜單
如果xuan=1,下拉符號向上,表示打開下級菜單
(3)設置選中
如果xuanzhong=1,選中該行多選框。
步驟5
設置下拉符號鼠標單擊時事件:
如果xuan=0,更新行this,列xuan=1。設置文本1級文本標簽=memu1,2級文本標簽=memu2,出發鼠標單擊展開按鈕。
如果xuan=1,更新行this,列xuan=0。設置文本1級文本標簽=memu1,2級文本標簽=memu2,出發鼠標單擊收起按鈕。
步驟6
設置展開按鈕鼠標單擊時事件:
如果2級文本標簽為空,更新行條件[[Item.type==’2’&&Item.memu1==a]],更新see=1;
如果2級文本不為空。更新行條件,[[Item.type==’3’&&Item.memu1==a&&Item.memu2==b]],更新see=0。
步驟7
設置收起按鈕鼠標單擊時事件:
如果2級文本標簽為空,更新行條件[[Item.type!=’1’&&Item.memu1==a]],更新see=0,xuan=0;
如果2級文本不為空。更新行條件,[[Item.type==’3’&&Item.memu1==a&&Item.memu2==b]],更新see=0。
步驟8
設置多選框事件:
選中時,更新行this,列選中=1,設置文本1級文本標簽=memu1,2級文本標簽=memu2,type文本標簽=type,觸發鼠標單擊選中按鈕的事件。
取消選中時,更新行this,列選中=0,設置文本1級文本標簽=memu1,2級文本標簽=memu2,type文本標簽=type,觸發鼠標單擊取消選中按鈕的事件。
步驟9
設置選中按鈕鼠標單擊時事件:
如果type文本標簽=1,更新行條件[[Item.memu1==a]],更新xuanzhong=1。
如果type文本標簽=2,更新行條件[[Item.memu1==a&&Item.memu2==b]],更新xuanzhong=1。
步驟10
設置取消選中按鈕鼠標單擊時事件
- 如果type文本標簽=1,更新行條件[[Item.memu1==a]],更新xuanzhong=0。
- 如果type文本標簽=2,更新行條件[[Item.memu1==a&&Item.memu2==b]],更新xuanzhong=0。更新行條件[[Item.memu1==a&&Item.memu2==”&&Item.memu3==”]],更新xuanzhong=0。
- 如果type文本標簽=3,更新行條件[[Item.memu1==a&&Item.memu2==b&&Item.memu3==”]],更新xuanzhong=0,更新行條件。[[[Item.memu1==a&&Item.memu2==”&&Item.memu3==”]],更新xuanzhong=0。
步驟11
取消選中按鈕、選中按鈕、收起按鈕、展開按鈕、1級文本標簽、?2級文本標簽、type文本標簽設置為隱藏。
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
怎么加你的公眾號
Axure高保真原型
提個小BUG,當2級菜單下的所有三級菜單都被勾選后,相對應的2級菜單是不是也應該是選中的狀態?我用單選按鈕組合的方式也試著做了下,在某些邏輯上也會有些問題。
是的,這個是幾年前的教程了,現在都基本上不用了。你可以到我公眾號里面看看,有最新的效果,包含增刪改查正選反選的效果
沒有明白,1級文本標簽、?2級文本標簽是怎么來的
從第五步開始就懵了,取消選中按鈕、選中按鈕、收起按鈕、展開按鈕、1級文本標簽、?2級文本標簽、type文本標簽這些要怎么放置的?放在中繼器內還是外?可以發個rp文件嗎
有需要可以自己下載,原型預覽及下載地址:
https://axhub.im/pro/efa8c9753e4a8038
上面的a和b是變量嗎,是怎么出現的?
原型預覽及下載地址:
https://axhub.im/pro/efa8c9753e4a8038
哈,看完還是不太會?你可能需要從Axure基礎開始學
這里推薦你加Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:原型禮包
領取適合產品新人的原型設計大禮包哦,cc還會不定期分享Axure免費視頻課程呢!
可以給一下rp文件嗎,沒有做出想要的效果
能不能給一份rp文件呀,按照步驟弄了,但是沒有實現效果想看看問題出在哪里了
hello,你有帶復選框的樹狀菜單嗎