Accessories
   >TV Ads
   360 View
   Photos
Apple accessories help you get the most out of your iPhone. Find out more
 
悠識數位 UserXper.com
更多範例, 請上UserXper網站
介面設計樣式 (UI Design Pattern)：Accordion
 
A.產品管理
B.會員管理
文章查詢
匯入資料
新增文章
類別管理
C.文章管理
示範1：
點選下方功能類別A,B,C，會彈開該類別的子功能項目。
這個範例模擬了類似Microsoft Outlook左側功能列的展開效果。這種使用者介面樣式 (UI pattern)稱為 "Accordion"。

這個範例使用的技巧是Axure RP裡頭的Dynamica Panel Wdiget。

模擬 iPhone手機展示的部份，在標題列上則使用了Axure RP 5 漸層填色(Fill Color)以及延遲反應 (delay 300ms)的功能。
說明：
DHTML Widget :Accordion Menu 2.0  DHTML code
Accordion Control - Examples  這裡有13種Accordion的實際例子。
YUI Widget: Accordion Manager - Source Code   Javascript程式碼
程式碼參考：
當Mouse Over 下方的標題列時，自動彈開該項目的內容。
( 程式開發人員可以參考以下Accordion程式碼)
示範2：