Axure实现列表选项添加至其他列表

Axure实现列表选项添加至其他列表

本篇教程的制作也需要用到中继器,之前的文章已经多次提到过中继器,想必大家都有一定的了解,我们今天要实现的就是关于将列表选项添加至其他列表的操作步骤,如下图所示:

Axure列表

这个条件,是在数据集中添加了一列数据“IsShow”,来进行控制的。

Axure载入时

在中继器元件的载入时,我们要添加一个【添加筛选】到当前中继器的动作,这个筛选动作的条件就是“IsShow”这一列的列值为“True”。所以,在浏览器中只会显示部分列表项(画布中不会有实时的变化)。

Axure添加筛选

注意:初始状态下,左侧列表所有列表项全部显示,而右侧列表应该是空的。也就是说,左侧中继器数据集中“IsShow”这一列的数据都为“True”,右侧中继器数据集中“IsShow”这一列的数据都为False。

Axure添加用例

接下来,我们就根据刚才分析出来的交互内容,制作这个案例。

1、鼠标点击任何一个列表项时,我们都要让列表项改变颜色;再次点击列表项时,恢复默认颜色。

列表项有默认颜色和选中时的颜色,默认颜色在样式中直接设置,选中时的颜色我们需要在属性中设置【选中】的交互样式。

Axure选中

然后,我们再通过交互动作改变元件的选中状态,从而实现样式的改变。

Axure切换选中状态

2、列表项改变颜色的同时,要让软件标记被点击列表项对应的数据行;恢复默认颜色时,让软件取消标记。

列表项颜色的改变,是在选中状态改变时触发的。那么,在选中状态改变时,我们也可以进行标记的动作。【选中】时【标记行】,标记当前所在中继器的【This】行。也就是与被点击的列表项相对应的数据行。

Axure标记行

而当我们再次点击同一个列表项,选中状态会发生改变,这个时候,我们还要进行【取消标记行】动作的设置。

Axure取消标记

注意:矩形的触发事件【选中时】和【取消选中时】在【更多事件】中选择。

在这一步完成之后,还要再添加一些交互。就是让右侧列表中相应的列表项也被标记和取消标记。

我们修改【选中时】的【标记行】动作,再勾选另外一个中继器元件,标记范围选择【条件】,在条件中我们输入表达式“[[TargetItem.ListItem==Item.ListItem]]”,表达式的含义是当前中继器列表项的数据行中“ListItem”列值与被勾选的目标中继器列表项的数据行中“ListItem”列值相同,符合这个条件的数据行将被标记上。

Axure条件

接下来,【取消选中时】我们同样要在【取消标记行】的动作中,对另外一个中继器进行标记的同步。

Axure条件

3、点击添加到右侧的按钮时,清除左侧被标记的列表项;右侧列表添加左侧标记的列表项;取消左侧列表所有标记。

点击添加到右侧的按钮“ToRight”时,要将左侧列表中被标记行的“IsShow”列的列值更新为“False”。并且,将右侧列表中被标记行的“IsShow”列的列值更新为“True”

我们在按钮“ToRight”的【鼠标单击时】添加【更新行】的动作,更新中继器“LeftLsit”中【已标记】的行,然后选择列为【IsShow】,列值改为“False”。

Axure更新行

然后,在刚才的动作中,再勾选中继器“RightLsit”,更新【已标记】的行,然后选择列为【IsShow】,列值改为“True”。(参考上一个操作,只是最后的值不一样。)

最后,再添加一个【取消标记行】的动作,取消两个中继器中【全部】的标记。

Axure取消标记

当完成上一步操作之后,我们就已经实现了,将左侧列表项向右侧列表中添加的效果。

以上内容就是关于Axure实现将左侧列表项向右侧列表中添加的效果的教程,更多文章点击链接:Axure的选项组使用教程

在线客服
客服邮箱
客服电话
17051276424