Axure8.0實例|簡單易擴展的手風琴菜單
系統中常常會有多級目錄,這里簡單介紹一下常常使用到的手風琴的菜單,本文用到的知識點主要是對中繼器的篩選和動態面板的尺寸及移動。
預覽:
一、元件準備
1、矩形框一個。這里先準備一個,等到用例完成了之后,想要幾個就直接復制就好了。目的是充當一級菜單吧,命名為“1”,這里一定要注意名字哦,后面會用到的;
2、動態面板一個。目的是顯示二級菜單用的。這里就命名為“二級菜單”設置成隱藏,動態面板設置成“自動調整為內容尺寸”即可;
3、中繼器一個。目的是存放二級菜單用的,名字也叫“二級菜單”吧,中繼器有兩個字段name和fid,并且把它放到動態面板里面,中繼器里面默認是有一個矩形框的,就用它來顯示中繼器的內容吧;
二、添加用例
1、“1”矩形框添加用例。點擊“1”時有兩種情況:一是“1”下面的二級菜單已經顯示出來了;二是“1”下面的二級菜單未顯示。
(1)已顯示出二級菜單,我們根據“1”和“二級菜單”動態面板的屬性來判斷。如果“1”的底邊坐標和“二級菜單”動態面板的頂邊坐標相同,并且“二級菜單”動態面板的可見性為true的話,那么我們在點擊“1”的時候要把二級菜單隱藏掉;
(2)“1”下面未顯示二級菜單。這種情況說明,二級菜單要么是隱藏狀態,要么是在別的一級菜單下面(目前只有“1”這么一個一級菜單)。
①綜合考慮來看,首先我們要先把二級菜單隱藏掉(就算是已經隱藏的了,再隱藏一下又何妨呢);
②從中繼器中篩選是“1”下的二級菜單,在篩選前記得一定要清楚之前的篩選,不然就會有麻煩的;
③設置“二級菜單”動態面板尺寸。讓“二級菜單”動態面板的高度等于滿足條件的中繼器數據的高度和。至于這里為什么是乘以40的,因為中繼器里面的矩形框的高度我設置的是40 ^_^;
④移動“二級菜單”動態面板。因為如果有多個一級菜單的話,“二級菜單”可能不在你要點擊的一級菜單下面,所以需要要把“二級菜單”動態面板移動到,你點擊的一級菜單下面來;
X:
Y:
⑤把“二級菜單”面板顯示出來,到這里已經完成“1”下面的“二級菜單”的所有用例了;
(3)添加更多的一級菜單。添加與“1”同級別的菜單。直接復制“1”然后把名字改一下就可以了;我這里復制了兩個一級菜單,名字分別為“2”和“3”。如果你需要更多個,那么就一直Ctrl+v下去吧;
(4)添加“二級菜單”。在“二級菜單”中繼器中添加內容;
name:二級菜單的名字;
fid:一級菜單的名字(這里要注意是一級菜單的名字,而不是一級菜單的文本內容);
(5)最后還差一步,不要忘記了,那就是設置中繼器的“每項加載時”用例。把name的值通過中繼器中的矩形框展示出來就可以了;
三、預覽
大功告成!F5走起~
PS:這個手風琴菜單的優勢就是,一次編輯用例,直接復制即可,而且只需要在中繼器中操作二級菜單即可,方便快捷。
如果大家有什么想要做的小功能或案例的話,可以留言告訴我,閑暇時可以一起探討~
本文由 @無淚?原創發布于人人都是產品經理。未經許可,禁止轉載。
第三個一級菜單一直往下移動是怎么回事?
8.0版的中繼器沒有找到設置fid的地方
能把這個發我一份嗎?有的地方看不太懂,935191604@qq.com
都做完了能否放個下載鏈接呢
請問二級菜單怎樣實現頁面跳轉呢?
請問怎么設置選中二級菜單時,文字顏色變藍
點擊第一個一級菜單第二個菜單不下移,第三個菜單下移,而且二級菜單顯示不完整,動態面板已經設置“自動調整為內容尺寸”
動態面板不能收起而且移動距離過寬是怎么回事,數據都是和你一樣的啊
復制之后 點擊第一個一級菜單 第二個一級菜單不往下走是怎么回事?
沒有問題呀 跟你的是一樣的
所有的弄完后 直接復制就可以了嗎?復制完沒有其他操作嗎?
加了
請問預覽的視頻效果是怎么做出來的,714226583 如果有時間請加我一下,大神請賜教。
是用什么軟件轉換的
好的,謝謝。