【Axure原型圖】—— 7. CustomDroplist（自定義下拉菜單）

自定義下拉菜單，custom droplist, 使用hide和show的動作，來添加下拉菜單的交互動作，使用“Set Text" action來顯示用戶的選擇

Step0: 下載練習文件

在這裏下載AxureTraining.rp文件，並用Axure RP打開

---

Step1: Hide the droplist options

1. 打開"CustomDroplist"頁面
2. 頁面包含了一個Group，名字叫"Custom Droplist"， 這個組裏麪包含了另外兩個其他的Group： "Select Button"和"Options", 其中，select button將會作爲下拉菜單的按鈕，options將會作爲下拉菜單的body

3. 選中Optinos Group， 然後將其隱藏
   

Step2: Toggle Visibility of Droplist options

1. 選擇"SelectButton"Group, 給其添加一個OnClick case
2. 在case編輯器中選擇"Show/Hide"-->"ToggleVisibility"，在"Configure actions"選中"Options" group
3. 在右側的Animite Show下拉菜單中，選擇"slide down" , 當你選中slidedown的時候，slide up就會自動選中
4. 點擊“OK"來關閉Case Edit

Step3: Set Text on Select Button and Hide Options When an Option is clicked.

當你選中一個option的時候，該選項的內容會出現在select button上

1. 在Outline pane中，選擇" Options1 " rectangle widget. 然後雙擊"Onclick" ，創建一個Onclick case
2. 在CaseEditor中，選擇“Set Text" action, 在Configure actions中選擇"Select Button" group中的那個rectangle widget
3. 在右側的底端的“Set text to”中，選擇“text on widget"， 默認就是This，保持不變
4. 再在左側選擇"Show/Hide"-->"Hide" action。 在Configureactions中選擇"Options"Group
5. 在右側Animite下拉菜單中，選擇“Slide up"
6. 點擊確定

Step4: Paste Onclick case onto Other Options

因爲在第三部中，我們在設置“Set Text” action中添加了“Set Text to” 的值爲“This”， 我們就可以將該case應用到其他剩餘的Options中，顯然我們使用copy比重新創建要來得快

在Option 1中，選擇Case1， 然後複製，粘貼到其他的“Option”中

preview

點擊預覽，就可以看了

注: 本人Axure系列的翻譯blog僅供個人記錄學習，侵刪.