自定義下拉菜單,custom droplist, 使用hide和show的動作,來添加下拉菜單的交互動作,使用“Set Text" action來顯示用戶的選擇
Step0: 下載練習文件
在這裏下載AxureTraining.rp文件,並用Axure RP打開
Step1: Hide the droplist options
- 打開"CustomDroplist"頁面
- 頁面包含了一個Group,名字叫"Custom Droplist", 這個組裏麪包含了另外兩個其他的Group: "Select Button"和"Options", 其中,select button將會作爲下拉菜單的按鈕,options將會作爲下拉菜單的body
-
選中Optinos Group, 然後將其隱藏
Step2: Toggle Visibility of Droplist options
- 選擇"SelectButton"Group, 給其添加一個OnClick case
- 在case編輯器中選擇"Show/Hide"-->"ToggleVisibility",在"Configure actions"選中"Options" group
- 在右側的Animite Show下拉菜單中,選擇"slide down" , 當你選中slidedown的時候,slide up就會自動選中
- 點擊“OK"來關閉Case Edit
Step3: Set Text on Select Button and Hide Options When an Option is clicked.
當你選中一個option的時候,該選項的內容會出現在select button上
- 在Outline pane中,選擇" Options1 " rectangle widget. 然後雙擊"Onclick" ,創建一個Onclick case
- 在CaseEditor中,選擇“Set Text" action, 在Configure actions中選擇"Select Button" group中的那個rectangle widget
- 在右側的底端的“Set text to”中,選擇“text on widget", 默認就是This,保持不變
- 再在左側選擇"Show/Hide"-->"Hide" action。 在Configureactions中選擇"Options"Group
- 在右側Animite下拉菜單中,選擇“Slide up"
- 點擊確定
Step4: Paste Onclick case onto Other Options
因爲在第三部中,我們在設置“Set Text” action中添加了“Set Text to” 的值爲“This”, 我們就可以將該case應用到其他剩餘的Options中,顯然我們使用copy比重新創建要來得快
在Option 1中,選擇Case1, 然後複製,粘貼到其他的“Option”中
preview
點擊預覽,就可以看了