【Axure原型图】—— 7. CustomDroplist（自定义下拉菜单）

￡神魔★判官ぃ 2022-01-13 16:21 253阅读 0赞

自定义下拉菜单，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， 然后将其隐藏   ![【Axure原型图】—— 7. CustomDroplist（自定义下拉菜单）][Axure_ 7. CustomDroplist] ##

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

转载于:https://blog.51cto.com/gumpping/2365194

[AxureTraining.rp]: http://d3g1p8ush40lh4.cloudfront.net/AxureRP8Training/AxureTraining.rp
[Axure_ 7. CustomDroplist]: https://s1.51cto.com/images/blog/201903/15/e169150ad1945cf34fbad58ea1cb7cd8.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=