多语言展示
当前在线:1207今日阅读:27今日分享:41

原型设计:[3]AXURE实现复选框全选和取消全选

在利用AXURE原型工具进行产品设计时,经常用到复选框的全选和取消全选的交互操作,一般选择复选框来控制选项全选中和全取消的效果,也可以用按钮或文字等其他作为开关来控制这种效果,下面主要介绍利用一个复选框控制选项全选中和全取消选中的效果
工具/原料

 AXURE RP Pro 6.5 原型设计工具

基本设置
设置全选中效果
1

首先选中“城市全选”复选框添加Onclick点击用例,用例命名“全选中效果”,然后给用例添加条件“if选中于 城市全选等于:真”,如下图

2

然后在这个条件下添加动作,如果选中了“全选”,那么同时选中其他所有城市选项,选择设置变量/部件值>>打开设置编辑器>>依次设置其它所有城市复选框的值为真,点击确定,如下图

取消全选中效果
1

在“城市全选”复选框的Onclick点击事件下添加第二个用例“全不选效果”,条件设置为“Else if 选中于 城市全选等于:假”,操作同栏目2中的步骤1

2

然后在上一步骤的条件下添加动作,如果取消选中“全选”,那么同时取消选中其他所有城市选项,选择设置变量/部件值>>打开设置编辑器>>依次设置其它所有城市复选框的值为假,点击确定,如下图:

3

全部设置完之后,预览原型,就可以实现全选和全不选效果了,如下图

4

如果利用其他组件,例如按钮组件,图形,文字等作为开关控制全选效果,设置步骤同上,只需要在添加用例时,替换本节中用于做控制开关的复选框“城市全选”即可

推荐信息