本节书摘来自异步社区《Axure RP7网站和APP原型制作从入门到精通》一书中的第2章,第2.3节,作者 金乌,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.3 母版使用案例

Axure RP7网站和APP原型制作从入门到精通
这个案例是为了帮你进一步理解什么是自定义事件及其重要性。在这个案例中,我将演示如何使用一个带有自定义事件的母版在4个不同的页面中触发不同的动作。在Axure中,如果没有自定义事件,这是无法实现的。

01 在站点地图中创建4个页面,在任意页面的设计区域中添加“上一页”和“下一页”两个部件,还有两条水平线,并将其转换为母版,见图12。


8005f7cbb34b396be4f07dc5bfa9fc731e1d4fd9

02 双击母版,进入编辑状态,选中上一页,在部件交互面板中双击“鼠标单击时”事件,在弹出的用例编辑器中新增自定义事件动作,并在第四步配置动作中新增自定义事件,给其命名为 previous(注意:不支持中文),勾选其前面的复选框(如果不勾选,在母版的交互面板中是看不到该事件的),点击“确定”按钮,见图13。


ba74d4bce473bd69ff970419c24d51b0305e9a5f

03 选中下一页部件,在部件交互面板中双击“鼠标单击时”事件,在弹出的用例编辑器中新增自定义事件动作,并在第四步配置动作中新增自定义事件,给其命名为next(注意:不支持中文),勾选其前面的复选框(如果不勾选,在母版的交互面板中是看不到该事件的),点击“确定”按钮,见图14。


87f2e3aa561097a168f4f3cb3ec9f96b8ec2d1f6

04 将该母版拖放到每个页面的设计区域中。

05 为不同页面中的母版添加自定义交互事件。注意,首页中只能点击“下一页”,所以此页面的母版只添加点击next事件,在当前页面打开 page1即可。在page1/page2的母版中分别添加previous和next事件,让其跳转到相应的页面。在page3的母版只添加previous事件,让其跳转到page2,见图15。

06 按下F5键,快速预览测试效果。


5b9b1e3e52c94d9184dc083d68b2921e9066853e
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐