列表选项添加至其他列表

AxureRP8.0教程 小楼一夜听春语 3459℃ 0评论

温馨提示:阅读此篇文章内容,需要具备中继器基础操作能力。

标题可能不太容易看懂,大家看张图就明白了。

看了上面这张图,相信大家已经明白,我们要做的交互了。

这个交互我们先来分析一下,用户都做了什么?我们给用户什么样的反馈?

接下来,我们准备元件。

这里,我只标注与交互相关的主要元件。

为了让大家看清楚各个元件的用途与内容,我在两侧列表中显示了一些数据。

实际上,这两个列表里面的内容应该是一样的,都有相同数量的列表项数据内容,只是有条件的进行显示列表项。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

而从右侧列表中移除列表项的操作,实际上和刚才实现的交互是一样的,只不过是在不同的元件上再做一遍相同的交互,大家参考刚才的操作过程,就能够完成。

本教程案例源文件下载,请关注本站微信订阅号“iaxure”(产品经理班),在往期回顾中找到此篇文章,末尾即有下载地址。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 列表选项添加至其他列表

喜欢 (29)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 楼大好帅,刚做的项目正好用到 :mrgreen:
    细雨青春2017-05-16 16:02 回复
  2. 有没有做好的原型
    布布2017-05-20 10:08 回复