《Axure RP7网站和APP原型制作从入门到精通》一2.3 母版使用案例-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Axure RP7网站和APP原型制作从入门到精通》一2.3 母版使用案例

简介:

本节书摘来自异步社区《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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章