《Axure中继器实现穿梭框移动数据操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品等多维度案例或实操来进行更多的学习;此教程是由zilin在2021-06-08发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
今天教大家的教程是Axure中继器实现穿梭框移动数据操作实例,穿梭框是常用的一个选择器,它使用直观方式在左右列表框移动数据,实现数据的多项选择。具体操作步骤如下:
所以今天和大家分享如何用中继器做一个高保真的穿梭框原型,本教程主要是讲解两个中继器的联动交互,属于中高级教程。
实例演示:https://yu1cwx.axshare.com
中继器(内含矩形)*2;背景框*2;左箭头*1;右箭头*2;文本*2,如下图所示摆放;
中继器内的矩形需要取消边框,然后设置鼠标移入时填充颜色为灰色,选中时填充颜色为蓝色,这样会有更好的交互感。
背景框置于底层,调整合适的大小和位置即可。
左边的为未选项中继器1,在中继器表格内填写对应选项文字;然后复制到右面,为已选项中继器2,由于已选项默认为0,所以需要删除中继器所有行,默认空值即可。
中继器1和2均需取消隔离选项组和隔离单选按钮组效果,两个中继器内的矩形需要设置单选组。
文本元件命名为逻辑1和逻辑2,默认为空且隐藏,后续用于逻辑交互
中继器1每项载入时:
设置中继器1内矩形文字为列表Column0的值,这个交互是中继器默认设置的。
中继器1内矩形鼠标单击时:
选中当前元件:因为之前我们设置了选中的颜色变蓝,所以这样做以后,就可以知道选中了那一项,而且因为设置了单选组,所以也不会同时选中多个。
设置逻辑1的文本为列表Column0的值:这里其实就是把选中的值记录下来,方便后面左右箭头穿梭的操作
中继器2每项加载时及内部矩形鼠标单击时:
交互和中继器1一致,不过需要注意的是,中继器2里面设置的文本是逻辑2的文本。
右箭头鼠标单击时:
这里需要判断逻辑1的文字是否为空,如果为空就是还没选中,就不发生交互,如果不为空,就需要做一个增加行和删除行的交互。
增加行:在中继器2里增加行,增加的值为逻辑1文本值
删除行:删除中继器1里的和逻辑1文本值相同的行
完成上述两个交互之后,我们还需要清空逻辑1的文本,因为如果不清空,我们点右箭头就可以无限增加同一个选项,所以这里需要清空逻辑1的文本值。
左箭头鼠标单击时:
左箭头和右箭头的交互其实是一个道理的,首先需要判断逻辑2的文本是否为空,如果为空就是还没选中,就不发生交互,如果不为空,就需要做一个增加行和删除行的交互,不过这里和中继器1的交互是反过来的
增加行:在中继器1里增加行,增加的值为逻辑2文本值
删除行:删除中继器2里的和逻辑2文本值相同的行
设置逻辑2的文本值为空值
那这样一个实用的穿梭框原型就制作完成了。
完成之后,以后我们需要使用的话,只需要填写在左边中继器1的表格里填写选项文字即可,方便使用,小提示,如果选项多的话可以在excel表格复制粘贴到中继器表格里哦
以上就是Axure中继器实现穿梭框移动数据操作实例内容介绍了,关于更多axure9教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure中继器使用教程之制作直播视频的卡片列表操作实例
> 下一篇 Axure中继器制作网站首页操作实例
2022-06-29 09:46
2022-06-16 09:55
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论