Axure教程:分級下拉列表
本文教大家做一個分級下拉列表,該原型內包含了全國行政區劃二級(省份-城市)和三級(省份-城市-區縣),一起來看看~
今天,教大家如何做一個分級下拉列表。
該原型使用十分簡單,只需要在中繼器表格中填入一二三級內容即可。
該原型內包含了全國行政區劃二級(省份-城市)和三級(省份-城市-區縣)。
效果演示
制作方法:
一、材料
下拉框1個,中繼器三個,中繼器內文本框1個,右箭頭一個,樣式根據個人喜歡設計即可。
二、中繼器表格
一級中繼器內容
text為顯示的內容
next為是否有下一級內容,如果有,不需填寫;如果沒有,填寫1
二級中繼器內容
text為上級的內容,即該二級是屬于哪個一級的
text2為顯示的內容
next為是否有下一級內容,如果有,不需填寫;如果沒有,填寫1。eg:北京市只有兩級,next填寫1,則不會顯示向右箭頭
三級中繼器內容
text為第一級的內容,即該內容是屬于哪個一級的
text2的為第二級內容,即該內容是屬于哪個二級的
text3為顯示的內容
三、中繼器內交互
(1)外框交互
這個比較簡單,鼠標單擊時,切換中繼器一二三的隱藏/顯示樣式。
(2)中繼器交互
一級中繼器內容
每項加載時,設置文本框的文字為text列。如果next列不是空值,隱藏向右箭頭。
二級中繼器內容
每項加載時,設置文本框的文字為text2列。如果next列不是空值,隱藏向右箭頭。
三級中繼器內容
每項加載時,設置文本框的文字為text3列。
(3)中繼器內文本框交互
鼠標單擊時:添加篩選。
即點擊一級中繼器的文本框時,篩選出二級item.text=this.text的值。點擊二級點擊一級中繼器的文本框時,篩選出三級級item.text2=this.text的值。完成之后,以后使用只要更改中繼器表格的數據即可,非常方便,所以推薦給大家使用。
今天的教程到這里就結束了,有問題或者想下載原型的小伙伴們可以在下方評論處給我留言哦,我們下期見。
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash,基于CC0協議
教程里,篩選說得太簡單,批注一下:
一級中繼器添加篩選時,目標選二級篩選器,且篩選規則為:[[Item.text==TargetItem.text]](二級篩三級同理)
親測,這樣才能成功。
原型預覽及下載地址:
https://axhub.im/ax9/042b0c52f140ea4e/#g=1
這教程坑你爹呢,你不想讓人知道就不要分享,搞出些亂七八糟的東西來誤導人,浪費人時間
我按照作者思路做出來了,思路正確沒問題的。
感覺還行啊
二級篩選三級的時候怎么篩選啊,我怎么寫都是錯的
學習了;是否有這樣的控件可以直接使用的?
教程里面有個地方沒寫清楚,篩選時候的交互應該是[[TargetItem.text == This.text]],不然篩選的對象就變成自己了。
多謝大佬點睛
大哥,原型看下唄
這個下拉框不錯,可以分享下源文件嗎?
這哥們是賣原型的,怎么會輕易分享給你