首页
登录 | 注册

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

本文网址:http://www.bnee.net/article/28924.html

相关文章

  • 发现以下3个比较好的资源,初级入门直接看就行主站http://www.webppd.com/thread-1835-1-1.htmlhttp://www.heguangming.com/?p=507/http://www.woshipm.c ...
  • 【Axure原型图】—— 3. NAVIGATION MENU(导航菜单)
    制作导航菜单 Step0: 下载练习文件 在这里下载AxureTraining.rp文件,并用Axure RP打开 Step1: GET STARTED 打开"Navigation menu" 页面 该页面包含了多个菜单 ...
  • 程矢Axure夜话:中继器系列视频教程之中继器下拉菜单联动
    程矢Axure夜话:中继器系列视频教程之中继器下拉菜单联动 案例描述:中继器下拉菜单联动 知识点: 中继器复合操作 效果图: 本站在线效果预览:http://www.91axure.com/repeaterlesson/repeaterdr ...
  • SylixOS下kill 15信号问题分析
    1.适用范围  本文档适用于希望了解SylixOS下kill 15信号的工程师.2.SylixOS与Linux的现象差异2.1 构建测试用例  构建一个简单的测试用例,主线程与子线程均运行20秒后结束,程序代码如程序清单 2.1所示:程序清 ...
  • 自定义Maven Archetype之 archetype:create-from-project
    前面讲过通过Maven原型maven-archetype-archetype来创建自定义Archetype的方法,但是这种方法似乎不太方便验证文件的正确性,这里将使用maven-archetype-plugin插件的create-from- ...
  • Android绘图:自定义View之——矩形进度条、圆环进度条、填充型进度条、时钟
    主函数 矩形进度条自定义View 矩形进度条的布局 成像图 圆环形进度条自定义View 圆环形进度条的布局 成像图 填充型进度条自定义View 填充型进度条布局 成像图 时钟自定义View 时钟自定义View布局 成像图 主函数 这几种进度 ...
  • IDE自定义工程模板
    1. 需求介绍    基于SylixOS开发通用工程后,把定制的BSP等工程做成模板后可以在IDE中自动生成.2. 功能实现2.1      制作工程模板     在IDE安装目录D:\ACOINFO\RealEvo\src\bsp选择需要 ...