AxureRP9不同Page使用同一个Master,触发不同事件。

  • 一、Axure RP 母版的使用
    • 第1节 添加/编辑/删除
    • 第2节 添加母版到页面中
    • 第3节 从页面中移除母版
    • 第4节 拖放行为
    • 第5节 自定义触发事件
  • 二、母版自定义触发案例使用
    • 案例一:母版的自定义触发事件
      • 1、创建一个母版,命名为“OnlineService”。
      • 2、为母版的原件命名和设置
      • 3、创建一个自定义的触发事件,就如同需要购买一个配电箱。
      • 4、将母版中的触发事件与自定义触发事件绑定,就像将供电总线接入配电箱。
      • 5、每个页面的按钮元件分别添加不同的动作。
      • 6、页面PageA中
      • 7、页面PageB中
    • 案例二:母版制作的导航菜单项对应页面变色
      • 1、双击打开母版“Menu”的编辑区,然后软件导航菜单中点击【布局】,选择最后一项【管理自定义触发事件】。
      • 2、在【管理触发事件】的窗口,点击加号“+”按钮,新建一个触发事件并命名,例如“PageOnLoad”,点击【确定】按钮保存退出。
      • 3、将母版中每一个导航菜单项的【载入时】事件都通过【引发事件】的动作指向刚刚创建的自定义触发事件“PageOnLoad”。
      • 4、母版的功能面板中,在母版“Menu”上点击鼠标右键,将母版【添加到页面中】。
      • 5、在每个页面中,点中母版“Menu”,然后双击【交互】中我们自定义的触发事件【PageOnLoad】。
      • 6、在用例编辑界面中,设置动作【选中】母版“Menu”中与页面同名的矩形。
      • 7、参照第5步和第6步为每个页面中的母版添加相应的交互。
      • 8、为每个页面添加一些内容,然后进行预览,就能够看到我们想要的交互效果。

在做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?

当然,我知道能够复制粘贴,但是,如果将来再发生改动的话,还是每个页面中都要再修改一次。太麻烦啦!

在Axure中可以通过母版解决多个页面中重复内容的编辑问题。

就像PPT中的母版一样,只需要把每个页面中都有的内容在母版中编辑完毕,然后添加到相应的页面中。当页面中添加了母版的内容时,如果母版中的内容发生了改变,页面中的内容也会同步改变。

一、Axure RP 母版的使用

第1节 添加/编辑/删除

我们先来看一下母版的基础操作:新建、编辑与删除。

新建:点击面板中的新建按钮或者点击面板空白处按快捷键<Ctrl+回车键>完成母版的创建。

编辑:创建后可以对母版名称进行编辑,双击母版名称,画布则变成母版的编辑区域。母版画布中可以像组织页面内容一样,放入元件、添加交互等组成模板的内容。

删除:如果需要删除一个母版,需要先将母版从所有关联的页面中移除,才可以删除母版。被删除的母版有下级母版时,下级母版将被同时删除。如果需要查看母版被添加到哪些页面中,可以在母版名称上点击【鼠标右键】,在菜单中选择【使用情况】进行查看。

第2节 添加母版到页面中

在母版名称上单击<鼠标右键>,打开右键菜单,在菜单列表中点击选项【添加到页面中】,在弹出的窗口中,可以指定将母版放到哪些页面中使用。指定页面的时候软件提供了一些快捷功能给我们使用。

第3节 从页面中移除母版

如果页面上不再需要某个母版,或者将某个母版添加到了无需添加该母版的页面中,我们可以通过在母版名称上点击<鼠标右键>,打开右键菜单,选择【从页面中移除】,在打开的页面中选择要移除的页面后,点击【确定】即可完成移除。

另外,也可以在页面中,点击母版将其选中,然后按下键其删除。

第4节 拖放行为

像一些网站的底部信息,每个页面中也都相同,这种内容可以做成母版使用吗?
母版除了使用前面的方法添加到页面中,还可以通过点住母版名称拖放到画布中的方式添加到某个页面中。而且为了满足不同情况的需要,软件提供了三种拖放方式。拖放方式的选择可以通过在母版名称上点击<鼠标右键>,打开右键菜单,在【拖放行为】的二级菜单中进行选择。

任意位置:允许将母版内容放入画布中的任意位置上摆放。

固定位置:母版内容放入到画布中并松开鼠标后,母版内容会自动放置到画布中的固定位置上,这个位置与母版中该内容所在的位置一致。

脱离母版:允许将母版内容放入画布中的任意位置上摆放。但是,当拖放结束后,这些内容与母版脱离联系,变成普通元件存在于画布中。母版进行编辑发生改变时,这些内容不会同步发生变化。

第5节 自定义触发事件

母版中的内容,包括交互都是可以重用在任何页面上,并且与母版保持一致。但是,假如母版中有一个按钮,我需要在不同的页面中,点击这个按钮时,显示不同的内容。需要怎么做呢?

二、母版自定义触发案例使用

案例要求:

比如说啊! A、B两个页面中添加了同一个母版,母版中有一个在线客服的按钮。在A页面中,鼠标进入这个按钮时显示客服小张的头像,而在B页面中,鼠标进入这个按钮时则显示客服小李的头像。

嗯,这么说我就明白了。我也给你举个例子。

我们家里用电,如果只有一个供电总线,那么开关供电总线的电闸会影响家中所有的供电。但是,我们希望每个房间的供电都能单独控制,所以,需要安装一个设备叫“配电箱”,通过配电箱就可以对每个房间的供电进行单独管理,不会互相影响。在Axure中,母版中的每个触发事件添加交互都像供电总线,影响所有使用了这个母版页面。如果在添加了母版的页面上给母版中的某个触发事件单独添加交互,这就需要我们给母版中的这个触发事件接上一个“配电箱”,这个“配电箱”的名字叫“自定义触发事件”。

案例一:母版的自定义触发事件

1、创建一个母版,命名为“OnlineService”。

2、为母版的原件命名和设置

双击母版名称,在画布中打开母版的编辑区域,然后,添加母版中的内容,一个矩形按钮和用于显示头像的图片。因为在鼠标进入按钮时,需要添加交互改变头像图片,所以我们需要为图片元件命名为“CallCenter”;

3、创建一个自定义的触发事件,就如同需要购买一个配电箱。

创建自定义触发事件,需要先双击母版名称,打开母版的编辑区域。然后,在导航菜单中,点击菜单项【布局】,选择列表中的最后一项【管理母版触发事件】中进行创建。本案例中,需要对按钮元件的【鼠标移入时】事件进行不同页面的交互设置,就可以点击【+】添加一个自定义的触发事件名称,比如:“MyMouseMove”。

注意:只有画布中编辑母版的内容时,才能在导航菜单中打开【管理母版触发事件】的选项。否则,该选项为灰色的禁用状态。

4、将母版中的触发事件与自定义触发事件绑定,就像将供电总线接入配电箱。

为按钮元件的【鼠标移入时】事件添加交互,【添加用例】,并设置动作为选择【引发事件】为“MyMouseMove”。

5、每个页面的按钮元件分别添加不同的动作。

将母版添加到PageA和PageB两个页面中。在添加了母版的页面中点中母版,则会在交互的功能界面中出现这个母版中绑定的所有自定义触发事件,就像从配电箱中接出的分线。

6、页面PageA中

为自定义触发事件“MyMouseMove”,添加用例设置动作为【设置图片】于图片元件“CallCenter”,为客服小张的头像。

然后,继续设置动作【显示】图片元件“CallCenter”,【更多选项】中选择“弹出效果”。弹出效果能够让鼠标离开时,显示出来的图片元件“CallCenter”再自动恢复隐藏状态。

7、页面PageB中

为自定义触发事件“MyMouseMove”,添加用例设置动作为【设置图片】于元件“CallCenter”,为客服小李的头像。
然后,继续设置动作【显示】图片元件“CallCenter”,【更多选项】中选择“弹出效果”。

案例二:母版制作的导航菜单项对应页面变色

母版的自定义触发事件,就好像母版与页面之间的一条通道,通过这条通道,就可以实现在不同的页面中为母版中的元件添加不同的交互。

下面,我们就一起来看实现步骤。

1、双击打开母版“Menu”的编辑区,然后软件导航菜单中点击【布局】,选择最后一项【管理自定义触发事件】。

注意:必须先打开母版的编辑区,否则【布局】菜单中的【管理自定义触发事件】选项是灰色不可用的状态。

2、在【管理触发事件】的窗口,点击加号“+”按钮,新建一个触发事件并命名,例如“PageOnLoad”,点击【确定】按钮保存退出。

Axure教程 | 母版管理&&自定义触发事件–运营喵的世界

3、将母版中每一个导航菜单项的【载入时】事件都通过【引发事件】的动作指向刚刚创建的自定义触发事件“PageOnLoad”。

以菜单项“index”为例:

把刚刚添加的交互复制,粘贴给其它的菜单项之后,就可以关闭母版的编辑区,到页面中添加相应的交互了。

4、母版的功能面板中,在母版“Menu”上点击鼠标右键,将母版【添加到页面中】。

5、在每个页面中,点中母版“Menu”,然后双击【交互】中我们自定义的触发事件【PageOnLoad】。

以“index”页为例:

6、在用例编辑界面中,设置动作【选中】母版“Menu”中与页面同名的矩形。

以“index”页为例:

7、参照第5步和第6步为每个页面中的母版添加相应的交互。

8、为每个页面添加一些内容,然后进行预览,就能够看到我们想要的交互效果。


百度网盘例子:链接
提取码:ikpw

AxureRP9不同Page使用同一个Master,触发不同事件。相关推荐

  1. Sharepoint 2010 用VS定制Master,并且每个Web应用同一个Master

    最近做了一个项目管理系统,要求用Sharepoint,有个特别的功能就是通过创建出来的子站点要求应用同一个Master页面,并且每次修改Master页面都要同时修改所有的子站点,有这个需求就限制了Ma ...

  2. IE中同一个url第二次AJAX调用无法触发onreadystatechange事件

    如果第二次通过XMLHttpRequest去请求一个URL,则不会触发onreadystatechange时间,虽然从调试插件来看,ie是进行了这次请求. 后来发现,这个是因为在ie下,如果请求的UR ...

  3. DropDownList 控件不能触发SelectedIndexChanged 事件的另一个原因

    相信DropDownList 控件不能触发SelectedIndexChanged 事件已经不是什么新鲜事情了,原因也无外乎以下几种: 1.DropDownList 控件的属性 AutoPostBac ...

  4. WPF 触屏事件后触发鼠标事件的问题及 DataGrid 误触问题

    WPF 触屏事件后触发鼠标事件的问题及 DataGrid 误触问题 目录 一.触屏事件连带触发鼠标事件的问题 二.DataGrid 误触问题及解决方法 独立观察员 2021 年 10 月 10 日 一 ...

  5. redis 能不能监听特定的key失效_php监听redis key失效触发回调事件

    订单超时.活动过期解决方案:php监听redis key失效触发回调事件 Redis 的 2.8.0 版本之后可用,键空间消息(Redis Keyspace Notifications),配合 2.0 ...

  6. 如何手动触发onchange事件? [重复]

    本文翻译自:How can I trigger an onchange event manually? [duplicate] This question already has an answer ...

  7. php 监听redis,php监听redis key失效触发回调事件_后端开发

    php中使用fsockopen实现异步请求(代码示例)_后端开发 php执行一段程序,有可能几毫秒就执行完毕,也有可能耗时较长.例如,用户下单这个事件,如果调用了些第三方服务进行发邮件.短信.推送等通 ...

  8. php 监听redis,php监听redis key失效触发回调事件

    订单超时.活动过期解决方案:php监听redis key失效触发回调事件 Redis 的 2.8.0 版本之后可用,键空间消息(Redis Keyspace Notifications),配合 2.0 ...

  9. DropDownList 控件不能触发SelectedIndexChanged 事件

    相信DropDownList 控件不能触发SelectedIndexChanged 事件已经不是什么新鲜事情了,原因也无外乎以下几种: 1.DropDownList 控件的属性 AutoPostBac ...

最新文章

  1. 024_JavaScript数组
  2. ajax使用异步问题
  3. LeetCode419罗马数字转整数python
  4. HDMI高清光端机产品介绍
  5. Python机器学习:逻辑回归002逻辑回归的损失函数
  6. 命运的拐弯处,那份竭尽全力拯救自己的韧性
  7. 【Flink】FLink checkpoint 某个 subtask 特别耗时 DisconnectException: null
  8. POJ1007 UVA612 UVALive5414 ZOJ1188 HDU1379 Bailian4086 DNA Sorting【排序+逆序数】
  9. Python 基础 —— from __future__ import
  10. 自定义getElementByClass
  11. 学校计算机教师事迹材料,中学信息技术优秀教师事迹材料:信念在“用心”中闪光...
  12. 背包问题-递归思想(C语言)
  13. 4种Dolby声场技术的区别
  14. python中使用缩进来体现代码之间的逻辑关系_Python使用缩进来体现代码之间的逻辑关系....
  15. 非极大值抑制(non-maximum suppression)的理解
  16. [POI2011] SEJ-Strongbox(数论)
  17. Word 中出现公式不能编辑问题(兼容模式)
  18. 辗转相除法c++_欧冠尤文被黑马,C罗太可惜了,他错失了一次千载难逢的机会...
  19. 网络工程设计与实施课程学习总结
  20. 钱袋宝屡次被罚,美团为何做不好金融?

热门文章

  1. 动态ip如何做域名解析?
  2. 硬盘安装Windows7--笔记
  3. c语言,期末复习之求多项式分式数列 1+1/2+2/3+3/5 ...........前n项和
  4. [0].Net开发者社区--您好大的官威啊!
  5. 保姆级教程!手把手教你使用Longhorn管理云原生分布式SQL数据库!
  6. 【JavaScript】将浮点数与整数分开
  7. 【Python】自动轨迹绘制
  8. 软件公司怎么定价它们的项目_如何为副项目定价
  9. keras构建卷积神经网络_通过此简单教程学习在网络上构建卷积神经网络
  10. 360浏览器急速模式_关于规范电子税务局浏览器要求及设置的通知