Axure母版的自定义触发事件

在Axure中可以通过母版解决多个页面中重复内容的编辑问题。就像PPT中的母版一样，只需要把每个页面中都有的内容在母版中编辑完毕，然后添加到相应的页面中。当页面中添加了母版的内容时，如果母版中的内容发生了改变，页面中的内容也会同步改变。

我们先来看一下母版的基础 *** 作：新建、编辑与删除。（图7-1）

（图7-1）

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

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

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

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

（图7-2）

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

（图7-3）

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

母版除了使用前面的方法添加到页面中，还可以通过点住母版名称拖放到画布中的方式添加到某个页面中。而且为了满足不同情况的需要，软件提供了三种拖放方式。拖放方式的选择可以通过在母版名称上点击<鼠标右键>，打开右键菜单，在【拖放行为】的二级菜单中进行选择。（图7-4）

（图7-4）

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

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

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

圆儿：这样果然很方便！但是还有个问题。母版中的内容，包括交互都是可以重用在任何页面上，并且与母版保持一致。但是，假如母版中有一个按钮，我需要在不同的页面中，点击这个按钮时，显示不同的内容。需要怎么做呢？

小楼：我没太听懂，你举个例子说一下。

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

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

案例13：母版的自定义触发事件

（图7-5）

（图7-6）

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

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

（图7-7）

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

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

（图7-8）

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

（图7-9）

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

（图7-10）

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

（图7-11）

为自定义触发事件“MyMouseMove”，添加用例设置动作为【设置图片】于元件“CallCenter”，为客服小李的头像。（参考图7-10）

然后，继续设置动作【显示】图片元件“CallCenter”，【更多选项】中选择“d出效果”。（参考图7-11）

axure版本 ：8.0

实现效果 ：

原型查看 ：

https://u7k6gc.axshare.com/#c=2

实现思路 ：

       通过动态面板实现菜单选中与未选中的不同效果，在页面加载时，将指定菜单的动态面板状态设置为选中状态。由于菜单一般会涉及多个页面，可以通过母版来减少重复工作。

       本示例只讲解了横放的菜单实现，竖放的菜单与此实现一致，各位童鞋们可以举一反三。

制作步骤 ：

1、制作一个未选中的菜单。添加一个文本框，填写好菜单的名称，设置好样式。

2、将其转换为动态面板。并用State1复制一个状态。

3、双击编辑State2，修改该文本的颜色，并添加一个选中的标记条。（各位可根据UI实现效果，添加其中的图标或者图片）

4、复制该动态面板，并修改相关文字，制作其他几个菜单，分别为每个动态面板取上对应的名字。

5、选中刚才制作的所有菜单的动态面板，点击右键，“转换为母版”，将此母版命名为“顶部菜单”。

6、分别为每个菜单制作相应的页面，并在页面顶部同样的位置插入该母版。

7、分别设置每个页面的页面载入时事件，动作添加为“设置面板状态”。

公司介绍页面，将动态面板“公司介绍”的状态设置为State2，其他动态面板的状态设置为state1

产品方案页面，将动态面板“产品方案”的状态设置为State2，其他动态面板的状态设置为state1

联系我们页面，将动态面板“联系我们”的状态设置为State2，其他动态面板的状态设置为state1

8、添加菜单点击事件。

双击刚才创建的母版，进入母版编辑界面。

分别选中创建的菜单动态面板，添加“鼠标单击时”事件

公司介绍菜单，鼠标单击时在当前窗口打开公司介绍页面

产品方案菜单，鼠标单击时在当前窗口打开产品方案页面

联系我们菜单，鼠标单击时在当前窗口打开联系我们页面

至此，一级菜单的效果已经实现。

母版能够全场通用,拖进来就是了,比如母版做了导航和footer,全部页面都运用这个母版,能保证整个网站都统一. 动态面板是局部的,在当前页面里,你能够设置一些部件为动态面板后,能够对该动态面板设置比如隐藏、切换等效果. ​

---