联动效果在网页的表单设计当中会经常遇到，很多表单上的一些自动填充功能就是，例如下拉菜单的一级菜单选择某个值之后要后面的二级，三级菜单的值跟着变化就是一种联动效果，这种最常应用在地域选择上，比如一级菜单选择了上海，二级菜单将上海的各个区县带出来。还有诸如列表框的选值变化，单选框、复选框的聚焦状态，根据分类进行表单轮换等效果，页面应用设计当中都会经常遇到，本文介绍几种常见的联动效果在AxureRP当中的实现方式。

页面跳转效果

功能描述：通过添加一个下拉菜单组件，其中有page1，page2，page3三个选项，分别设定每个选项的链接，并且规定在输出的页面中点选这三项中的任意一项，都链接到对应的页面中，并在跳转后的页面上能返回到主页面。

要实现上述功能，首先在主页面先添加一个下拉菜单组件(当然如果没有规定用下拉菜单组件，用列表框组件，水平菜单组件，垂直菜单组件，树菜单组件都是可以的，效果类似)，设置下拉选项为page1，page2，page3，再添加三个子页面，每个页面设定不同的显示内容，并在每个页面上添加一个流程图里的矩形组件，更改默认颜色并设置其链接页面至主页面(Home)，这样会比较简单，也可以用超链接或者图片映射组件来实现。

初始化完毕之后，设置下拉菜单的OnChange事件，使其选择page1时能跳转到页面page1，其他选项类似。设置的时候在交互事件属性窗口上，第一步要设置条件，点“添加条件”设置当下拉菜单值等于page1时，触动第二步的时间，即在当前窗口打开page1。也即设置了一个条件判断的过程，设置结果如下所示：

下拉菜单联动效果

功能描述：有两个下拉菜单组件A和B，分别有a1，a2和b1，b2各两个选项，要求在A下拉菜单的选择a1时，B下拉菜单自动显示b1；在A下拉菜单的选择a2时，B下拉菜单自动显示b2。

这是两级下拉菜单联动，在主页面上添加两个下拉菜单组件，分别命名为A和B，然后各自添加a1，a2和b1，b2两个选项，然后在A下来菜单上设置OnChange事件，使A下拉菜单的选择a1时，给B 下拉菜单赋值，使之显示b1，设置如下所示：

三级或更多级下拉菜单的设置与此类似，这里就不多介绍了。

页面轮换效果

功能描述：有一个下拉菜单，有产品和活动两个下拉选项，当选择产品时下方显示与产品相关的页面，当选择活动时下方显示与活动相关的页面，即跟据下拉菜单选择的变化，在下方显示不同的页面。

这需要前面讲到的动态面板交互效果的配合，与上面两种不一样，这是两个不同组件间的配合交互。在主页面添加一个下拉菜单组件，初始化选项为产品和活动，再制作一个前面例子当中的动态面板交互效果，设置下拉菜单的OnChange事件，使选择产品时，动态面板显示与产品相关的页面。设置如下：

自此，几种主要的联动效果都介绍完毕，第三种与第一种的区别就是没有页面跳转，效果是在同一个页面上展示的，这种在网页表单设计上经常用到。本文都是以下拉菜单组件来举例的，与此相同的还可以用列表框组件来实现，其他的如单选框和复选框的OnFocus事件，水平菜单、垂直菜单和树菜单的OnClick事件也都可以实现，不过OnClick事件就不需要设置第一步的条件判断了，直接响应事件即可。

例子在AxureRP5.5版本下调试通过

axure 如何设置选项联动_AxureRP教程相关推荐

  1. axure 如何设置选项联动_Axure教程｜用中继器做信息流，高仿人人都是产品经理网...

    本期给大家带来的是高仿资讯网站"人人都是产品经理网",来看看~ 一.照例先上gif 首页部分 中继器部分 二.制作思路 本次原型的制作主要有四个部分: 浮动导航 右侧区域 版权信息 ...

  2. axure 如何设置选项联动_Axure下拉框级联操作

    现实生活中有很多的下拉框是级联操作的,即因为第一个下拉框的选择,影响到后面的下拉框的选择的列表的数据.或许在代码中,这些操作相对比较简单,通过前一个下拉框的选择项来控制后一个下拉框的数据的动态添加.那 ...

  3. wp admin themes.php,wordpress主题后台制作教程-添加简单的设置选项|wordpress主题定制-阿树工作室...

    前面我们知道了怎样在wordpress后台添加一个设置页面,有了设置页面,我们只需要在这个页面添加上设置表单,然后保存数据即可.这篇教程我们以实例来讲述怎样添加一个设置选项. 同样的我们还是使用默认主 ...

  4. Win10右键没有压缩选项的解决教程

    在日常使用电脑过程中我们经常会对一些软件或者文件进行压缩,但最近有一些小伙伴发现自己Win10电脑的右键没有压缩选项,那么Win10右键没有压缩选项怎么办呢?下面就和小编一起来看看Win10右键没有压 ...

  5. 七彩虹智能主板设置U盘启动教程

    不同的电脑品牌主板进入bios的启动快捷键不同.在借助u盘安装系统的时候,我们经常会需要进bios调整u盘启动.有些网友不清楚七彩虹智能主板如何设置u盘启动,下面就给大家讲下七彩虹智能主板设置U盘启动 ...

  6. win10系统改win7设置bios方法图文教程

    大多数的小伙伴都喜欢用win7系统,但是市面上很多新购买的系统都是win1的,所以我们需要通过u盘装系统将win10系统改win7,所以大家都想来了解win10系统改win7设置bios方法图文教程哦 ...

  7. dell最新计算机如何U盘引导,2018戴尔最新版电脑bios设置u盘启动教程

    很多朋友使用的是2018戴尔最新版电脑,不过在使用的过程中,偶尔需要重装系统,那么2018戴尔最新版电脑bios怎么设置u盘启动呢?对于戴尔电脑bios设置u盘启动方法不甚了解,下面我们就来看看戴尔最 ...

  8. 联想微型计算机如何设置u盘启动,联想电脑如何设置U盘启动？联想电脑bios设置U盘启动教程...

    一般在为联想电脑重装系统的时候,我们都会选择使用U盘来进行重装.不过,U盘重装需要先进行U盘启动设置.对于很多电脑小白来说,这一步是最大的困难.那么,下面就让小编为大家带来联想电脑bios设置U盘启动 ...

  9. 华为笔记本linux usb启动,华为MateBook D(2018) BIOS设置u盘启动教程

    华为MateBook D(2018)搭载了第八代酷睿i5/i7处理器.8GB内存以及MX150 2G独显,顶配可达到128 SSD+1TB HDD,电脑整体性能强悍.那么,大家又是否清楚这款笔记本电脑 ...

  10. 精英A785主板在bios中设置u盘启动教程

    在使用电脑的时候,经常会遇到一些系统方面的故障,当系统无法继续正常使用的话,大家就会考虑U盘装系统,不过使用U盘重装系统的话,需要进入bios设置开机启动项顺序才能够正常安装.那么,精英A785主板如 ...

最新文章

  1. 比特币SPV节点启动流程图
  2. HDU 1248 寒冰王座
  3. html 获得文本节点,JavaScript获取节点——获取文本节点
  4. Json 时间 转换为 Javascript 时间 Date Jquery 调用WCF
  5. HALCON示例程序train_characters_ocr.hdev使用SVM分类器训练字体
  6. 修改git历史提交的commit信息
  7. 2020年美妆行业内容营销报告
  8. 蛋糕是叫胚子还是坯子_最好吃的蛋糕胚子——分蛋海绵蛋糕详解
  9. 2020 最新JavaWEB面试题
  10. 让同事主动配合工作的三点技巧｜智测优聘总结
  11. 50个BA分析工具第二个-Balanced ScoreCard
  12. linux内核模块Makefile的解析
  13. console.log详解
  14. 再来聊聊Redis到底是什么？
  15. GAN性能评测：Inception Score
  16. A man who has iron bone
  17. 易语言 hex16进制转换base64编码
  18. 换头像这个功能怎么测
  19. 萨鲁曼的军队 Saruman‘s Army（挑战程序设计竞赛）
  20. Java编程思想读书笔记——多态

热门文章

  1. 项目管理工具表格全汇总（免费领）
  2. Unity 3D模型展示素材
  3. 【老生谈算法】基于matlab的指纹处理和识别算法详解及程序源码——指纹识别算法
  4. 微信小程序登录授权开发
  5. 汇承蓝牙（HC-05）蓝牙虚拟串口插上后，串口助手无法找到该虚拟串口
  6. 物联网服务器搭建资料汇总
  7. adb server is out of date. killing... 解决方案
  8. 黑马python5.0课件_2020整理的黑马python 5.0新课程体系零基础到就业大实战
  9. CAD工具——批量打印
  10. UG二次开发GRIP标准件库