使用Axure實(shí)現(xiàn)Accordion(手風(fēng)琴)效果
啟動(dòng)Axure RP 1. 打開(kāi)Axure RP軟件并創(chuàng)建一個(gè)新的項(xiàng)目。 添加一級(jí)目錄項(xiàng)目 2. 在頁(yè)面上添加一個(gè)矩形(Rectangle),作為第一個(gè)一級(jí)目錄項(xiàng)目,并命名為"First"。
啟動(dòng)Axure RP
1. 打開(kāi)Axure RP軟件并創(chuàng)建一個(gè)新的項(xiàng)目。
添加一級(jí)目錄項(xiàng)目
2. 在頁(yè)面上添加一個(gè)矩形(Rectangle),作為第一個(gè)一級(jí)目錄項(xiàng)目,并命名為"First"。
添加中繼器
3. 添加一個(gè)中繼器(Repeater),并命名為"Repeater"。
轉(zhuǎn)換中繼器為動(dòng)態(tài)面板
4. 將中繼器轉(zhuǎn)化成動(dòng)態(tài)面板(Dynamic Panel),并命名為"SecondLevel"。
編輯動(dòng)態(tài)面板
5. 雙擊進(jìn)入動(dòng)態(tài)面板"SecondLevel",然后雙擊進(jìn)入默認(rèn)的狀態(tài),并再次雙擊進(jìn)入中繼器的主頁(yè)。
修改中繼器內(nèi)容
6. 刪除原有內(nèi)容,然后添加一個(gè)矩形(Rectangle),并命名為"id2"。
設(shè)置中繼器交互
7. 在下方選擇中繼器數(shù)據(jù)集(Repeater Dataset),在其中創(chuàng)建兩個(gè)列,并分別命名為"id1"和"id28"。
設(shè)置中繼器行為
8. 切換到中繼器交互(Repeater Item Interactions),設(shè)置"OnItemLoad"用例1,將文本框"id2"的內(nèi)容設(shè)置為"[[]]"。
為一級(jí)目錄添加事件
9. 回到矩形"First"所在頁(yè)面,準(zhǔn)備為其添加單擊事件。
以上是使用Axure實(shí)現(xiàn)Accordion(手風(fēng)琴)效果的步驟。通過(guò)創(chuàng)建矩形、中繼器和動(dòng)態(tài)面板,以及設(shè)置中繼器的數(shù)據(jù)集和交互行為,可以實(shí)現(xiàn)手風(fēng)琴效果。