Axure制作二級菜單欄是產(chǎn)品經(jīng)理必須掌握的基本技能久免。當(dāng)前市面上的教程多半采用動態(tài)面板或隱藏組合的方式智玻,動態(tài)面板切換太繁瑣证膨,而隱藏組合則不容易補(bǔ)增選項(xiàng)萨西。本文介紹一種使用中繼器的方式有鹿,您只需要制作一次,往后即可多次復(fù)用谎脯,非常方便的增刪選項(xiàng)葱跋。
Ps:網(wǎng)上也有朋友發(fā)過中繼器制作二級菜單欄的教程,但多數(shù)沒有解決二級菜單數(shù)量不一致的情況。本文在此基礎(chǔ)上增加了若干判斷條件娱俺,可以很好的解決這個(gè)問題稍味。
先看看效果:
第一階段 基本素材準(zhǔn)備
a、拖拽一個(gè)中繼器到主操作區(qū)
b荠卷、雙擊進(jìn)入中繼器頁面編輯細(xì)節(jié)
將默認(rèn)的矩形設(shè)為一級菜單模庐,復(fù)制6個(gè)矩形作為二級菜單。一級菜單尺寸設(shè)為200 * 40油宜,坐標(biāo)設(shè)為 0,0 掂碱;二級菜單尺寸設(shè)為180 * 38,與一級菜單欄右對齊慎冤。每級菜單間間距設(shè)為10疼燥。
c、將二級菜單設(shè)置為一個(gè)組合蚁堤,并命名
d醉者、設(shè)置一、二級菜單鼠標(biāo)懸停披诗、選中的變化
選中元件撬即,在屬性中設(shè)置當(dāng)鼠標(biāo)懸停時(shí),元件的顏色呈队、文字等變化
e剥槐、設(shè)置中繼器中每行間距為10
好了,到此第一階段準(zhǔn)備工作完成掂咒,你將得到這樣的效果:
第二階段 交互設(shè)置
2.1 設(shè)置二級菜單的展開
a才沧、將二級菜單組合設(shè)置為隱藏
b、由于我們需要一級菜單呈現(xiàn)的結(jié)果是:點(diǎn)擊一次選中绍刮,再點(diǎn)擊一次取消選中温圆。
選中一級菜單,添加用例孩革,設(shè)置“選中狀態(tài)為當(dāng)前元件”岁歉,值設(shè)為“toggle”;并且設(shè)置切換顯示/隱藏時(shí)膝蜈,選中二級菜單組合锅移。如下圖:
c、設(shè)置當(dāng)鼠標(biāo)選中二級菜單是饱搏,該二級菜單的狀態(tài)為選中
2.2 設(shè)置中繼器與數(shù)據(jù)的關(guān)聯(lián)
中繼器中的元件要與表格對應(yīng)起來才能展示真實(shí)數(shù)據(jù)非剃。
在中繼器表格中設(shè)置表頭。將一級菜單表頭設(shè)為a推沸,二級菜單表頭設(shè)為b1备绽、b2券坞、b3、肺素、恨锚、b6。
二級菜單數(shù)量有多又少,我們只希望加載已有的項(xiàng)目,而不用加載空白項(xiàng)目灰殴。即判斷某一個(gè)二級菜單“值”為空時(shí),隱藏該二級菜單他挎。
具體設(shè)置為,增加判斷條件雨让。選擇該二級菜單對應(yīng)的變量值雇盖,例如[[Item.b1]]忿等。當(dāng)[[Item.b1]]的值==空 時(shí)栖忠,隱藏該二級菜單。
必須注意的是贸街,需要選中拉動元件庵寞,默認(rèn)其方向?yàn)橄路健?/p>
將每項(xiàng)二級菜單都這樣設(shè)置
此后,我們只需要將中繼器表格數(shù)據(jù)展示到對應(yīng)元件上即可薛匪。
添加一個(gè)用例捐川,設(shè)置各菜單文本的值到對應(yīng)變量上。
最終加載設(shè)置的結(jié)果如下
第三階段 準(zhǔn)備數(shù)據(jù)逸尖,驗(yàn)證
準(zhǔn)備好相應(yīng)的數(shù)據(jù)古沥,驗(yàn)證最終結(jié)果。
可以在Excel中將數(shù)據(jù)編輯好娇跟,粘貼到中繼器表格中岩齿。
結(jié)果展示: