Axure 多选和取消多选

实现的效果:点击 多选,则默认全选,再次点击,默认子项取消全选状态;

Axure 多选和取消多选

首先打开Axure,设置三个多选框;多选组合命名55,选项一组合命名51,选项二组合命名52;

我这里是一个方框,里面一个白色对号,通过设置选中后方框蓝色填充,来区分是否选中;

Axure 多选和取消多选

 

首先,给三个多选图标,设置用例为【鼠标单击时】-选中状态为【toggle】,单击切换选中状态;

Axure 多选和取消多选Axure 多选和取消多选Axure 多选和取消多选

  用例添加示例如下;设置选中后 则单击切换选中状态;

Axure 多选和取消多选

设置【选中】时,填充蓝色;Axure 多选和取消多选;操作如下; Axure 多选和取消多选

这个时候生成的页面中,效果是展示未默认选中状态,单击没反应,再次点击,取消选中;这里为什么会有一次单击无效呢?

这里需要把整个图标,设置为选中情况;Axure 多选和取消多选,这个设置完后,就完全符合,打开页面,默认选中,单击后,取消选中,再次点击,选中;

 注意:多个多选框,则每个多选框都需要设置以上内容;鼠标单击-切换选中状态(toggle),设置选中状态的样子蓝色填充,设置为默认选中状态;

 三个选择框的设置到此就完成了,现在对控制全选按钮进行条件编辑设置;

Axure 多选和取消多选

首先梳理一下鼠标单击后的用例关系,当全选框为选中状态,则选项一和选项二都为选中状态;当全选框切换为取消选中,则选项一和选项二都为取消选中状态;

这里注意,在case1和case2里,都必须设置一下选中状态切换的动作;且这个动作需要再用例的第一顺位,否则不生效;

但是,这样操作后发现,在页面中,页面展示为默认全部选中的状态;如下

Axure 多选和取消多选

点击全选

全选取消选中,但是选项一和选项二仍为选中状态;单击二次,全选选中,选项一和选项二为不选中状态;

Axure 多选和取消多选 Axure 多选和取消多选

这个与预期不符;

原因是,默认全选为选中状态,第一次单击,执行case1,切换选中状态,选中状态的切换是【选中】-【不选中】,此时第一次单击,切换成了选中状态,但是展现效果是不填充;

选项一和选项二判断【全选】状态为ture,则执行也是ture,则保持不变;

单击第二次,toggle的效果,是不选中,也就是fasle,但是展现效果是填充;选项一和选项二执行case2,都更改为fasle;

这里可能有点绕,回头会整理出更容易理解的说法补充上来;

这个时候,将条件设置的反过来,效果就对了;

默认打开效果----------------------------------------------单击一次效果----------------------------------------------二次单击效果

Axure 多选和取消多选Axure 多选和取消多选Axure 多选和取消多选

 

 或者可以直接参考下面的用例内容;出来的效果就是正常的;

Axure 多选和取消多选

 

上一篇:MySQL对重音字符过于聪明


下一篇:盒模型应用