母版制作的导航菜单项对应页面变色(第2种方法)

AxureRP8.0教程 小楼一夜听春语 2174℃ 0评论

关于Axure中母版的使用,其实是非常有用的,它是帮助我们提高原型制作效率的工具。

在继续下面的内容之前,我建议大家先去了解母版以及母版的自定义触发事件。

相关教程:http://www.iaxure.com/5312.html

-----------------------------------------------------------------------------------------

这篇教程要实现的交互效果,实际上在之前的一篇教程中已经通过系统变量实现过。

对于这个效果的描述大家可以看一下之前的教程《母版制作的导航菜单项对应页面变色》。

而这一次,我们放弃使用系统变量,毕竟有很多同学对系统变量感觉很头疼。

我们这次使用母版的自定义触发事件来实现,让对系统变量难以理解的同学直接爆头(斜眼笑)。

首先,大家先完成《母版制作的导航菜单项对应页面变色》这篇教程的前四步。

然后,我们改变实现方法。

对母版有些了解的同学应该知道,母版里面添加的交互,在所有页面中都是一样的。

所以,像不同页面将不同的菜单项选中变色这种效果,它的交互只能在页面中添加。

但是,在页面中又无法单独编辑母版中元件的交互。

这时,就需要用到母版的自定义触发事件。

换句话说,母版在不同页面有不同交互设置的情况,可以通过母版的自定义触发事件来解决。

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

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

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

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

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

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

以菜单项“index”为例:

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

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

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

以“index”页为例:

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

以“index”页为例:

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

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

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址https://www.axure.com.cn/product/training/。

源文件下载:http://downloads.iaxure.com/master_menu2.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » 母版制作的导航菜单项对应页面变色(第2种方法)

喜欢 (20)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 为什么我的axure8没有引发事件这个选项。。。
    小白一个2018-04-12 11:48 回复
    • 最后一个
      xinxin2018-04-26 10:22 回复
  2. 居然删除评论?
    阿西吧12018-04-28 14:08 回复