1. 主页 > 设计资讯 > 热门新闻

Axure教程:中继器列表检查的高级用法

编辑领导:当我们工作中需要查看清单时,如何使用Axure进行相关操作?在本文中,作者向我们展示了使用中继器的列表检查操作。我们一起来看看。

Axure教程:中继器列表检查的高级用法(图1)

Axure教程:中继器列表检查的高级用法(图2)

Axure教程:中继器列表检查的高级用法(图3)

所需组件:

中继器:表单制作;文本框:表头制作;复选框:复选交互制作。

思路:赋值基于复读机中的校验状态,转换基于整个列表的状态值,得到所有选择的临界值公式。

教程如下。

一、复读机的重新选择和分配

Axure教程:中继器列表检查的高级用法(图4)

加载列表时,默认状态为未选中,状态值最初设置为“未选中”时为“-1”,选中时为“1”,因此加载时状态值分配为“-1”。

Axure教程:中继器列表检查的高级用法(图5)

如上图,未选中复选框时,点击时,复选框设置为“选中”状态,状态值为[[状态*(1)];也就是说,当状态在“未检查”状态下切换到“已选择”状态时,状态值被设置为“1”。

Axure教程:中继器列表检查的高级用法(图6)

同样,选择时,给出状态值[[状态*(1)];也就是说,当状态被切换到选定状态中的未选定状态时,状态值被设置为“-1”。

其次,总结中继器中的状态值

Axure教程:中继器列表检查的高级用法(图7)

Axure教程:中继器列表检查的高级用法(图8)

当状态值发生变化时,按照以下公式更新状态值的总值:[[count。slice (0)-exstate+state]]。

Axure教程:中继器列表检查的高级用法(图9)

当状态值改变时,通过赋值得到预状态值,如上图所示。

第三,选择全部时设置状态和分配

Axure教程:中继器列表检查的高级用法(图10)

Axure教程:中继器列表检查的高级用法(图11)

Axure教程:中继器列表检查的高级用法(图12)

应当注意,当全选择设置从“中间”状态切换到“全选择”状态时,需要将中继器中的状态值统一设置为“1”。

4.计算中继器中复选框对全选框的影响的临界值

在[步骤3]中,我们已经可以得到每次改变时状态值的总数,所以我们可以通过这个总数来判断中继器中所有选定盒子的状态何时会受到影响;判断条件如下:

Axure教程:中继器列表检查的高级用法(图13)

Axure教程:中继器列表检查的高级用法(图14)

当中继器中的复选框从“未选择”设置为“已选择”时,如果条件[[项。Repeater.itemCount-2]]满足,需要同步将全选框设置为“选中”状态;否则,只需将全选框设置为“中间”状态。

Axure教程:中继器列表检查的高级用法(图15)

Axure教程:中继器列表检查的高级用法(图16)

当中继器中的复选框从“选中”设置为“未选中”时,如果条件[[项。中继器。满足项目数*(1)+2]],需要将全选框同步设置为“未选中”状态;否则,只需要将全选框设置为“中间”状态。

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/xingyezixun/sjwz/505.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息