axure8事件改变样式_Axure技巧：为母版元素⾃定义事件 Axure有时会在⼀个原型图中复⽤组件，⽐如弹出对话框、页⾯头部导航条、左侧导航树等。如果采⽤简单的⽅式，那么可以在每个页⾯⾥都拷贝⼀份，但当修改了组件的某个地⽅后则需要检查并修改很多页⾯，其⼯作量可想⽽知。 为了解决这个问题，Axure提供母版功能。你可以将页⾯中公共的部分提取出来定义为母版，然后在需要的页⾯⾥添加该母版。此时如果要修改，则直接修改母版⽂件，所有引⽤该母版的页⾯会⾃动更新修改的内容。
为母版元素⾃定义事件的⼤致步骤为：
定义母版元素–>⾃定义事件–>添加⽤例
下⽂以弹出对话框为例说明母版的使⽤⽅法。本⽂仅适⽤于具有⼀定Axure使⽤经验的⽤户阅读。
1. 定义母版元素
1) 在Axure⽂件中任意新建⼀个页⾯，在页⾯中绘制⼀个弹出对话框的样式，参考下图：
2) 选择此对话框中的所有元素，点击右键选择“转换为母版”，为母版命名并选择拖放⾏为Place Anyway，即可以在页⾯的任意位置放置母版，创建母版成功后页⾯效果如下：
3) ⾄此，母版创建完成。写到这⾥可能⼤家有⼀个疑问，上⾯写的只是创建母版的步骤，那为什么⽂章标题叫⾃定义事件呢？带着这个疑问咱们进⼊下⽂的内容。
2. 为母版⾃定义事件
由于对话框在页⾯中的⾏为并不是孤⽴的，点击对话中的确定、取消按钮后效果是不同的，⽐如点击取消按钮直接关闭对话框⽽没有其他操作，点击确定按钮除了关闭对话框之外，还要执⾏其他操作。此时，我们可以为对话框⾃定义事件。 1) 在页⾯中添加“弹出对话框”母版，并添加⼀个Label组件，如下图所⽰：
其中，Label组件命名为lblMsg，对话框组件命名为dlgConfirm。
我们想要实现的效果是点击确定按钮，关闭对话框并在Label中显⽰“点击了确定按钮”；点击取消按钮仅关闭对话框，Label显⽰⽆变化。
2) 进⼊“弹出对话框”母版编辑界⾯，为“确定”按钮新建⿏标单击⽤例，如下图：
3) 选择动作“触发事件”，并添加⾃定义事件onSureButtonClick，并勾选此⾃定义事件，如下图所⽰：
防刺手套4) 同理，定义“取消”按钮的单击动作，并添加⾃定义事件onCancelButtonClick，如下图：王宝连
5) 关闭母版编辑页⾯，返回添加了母版的页⾯，单击对话框就可以看到⾃定义的事件了，如下图：
3. 为⾃定义事件添加⽤例
1) 为onSureButtonClick事件添加⽤例，实现点击确定按钮时隐藏对话框并在Label中显⽰⾃定义内容的功能，如下图：
智能水刀即：将对话框中的所有元素隐藏，并改变Label的⽂字为“⽤户点击了确定按钮”。
2) 同理，为onCancelButtonClick事件添加⽤例，实现点击取消按钮时隐藏对话框的功能，如下图：
3) 预览页⾯，分别点击确定、取消按钮查看效果。天车电路图
说明：
对话框也可以放在⼀个⾯板⾥，点击按钮后直接隐藏该⾯板；
如果对话框被放置在不同的页⾯，则可以根据页⾯的具体逻辑为onSureButtonClick和onCancelButtonClick事件定义不同的操作，从⽽满⾜各种使⽤场景。
作者：王春雷，互联科技创始⼈。12年互联⽹从业经验，5年产品设计经验。
本⽂由 @王春雷 原创发布于⼈⼈都是产品经理。未经许可，禁⽌转载。
毛细管数给作者打赏，⿎励TA抓紧创作！赞赏
复合片钻头
2⼈打赏
