【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仅供个人记录学习，侵删.