Axure中继器怎么制作穿梭框效果?

Axure的中继器除了进行列表的增删改外,还可以利用它来实现一些比较复杂的组件,例如穿梭框,这该怎么制作穿梭框呢?下面我们就来看看详细的教程。

软件名称:
原型设计工具Axure RP Pro 8.1特别版 中文汉化特别版(附汉化包+注册码+安装教程)
软件大小:
90.5MB
更新时间:
2018-05-24

Axure中继器怎么制作穿梭框效果?_第1张图片

1、首先我们需要两个中继器作为左中继器和右中继器,分别加入三个选项

左中继器:选项一、选项二、选项三,

右中继器:选项四、选项五、选项六,

并将中继器的值赋予左中继器_选项,右中继器同理,关于选项的样式各位网友根据自己的心意来哈。

Axure中继器怎么制作穿梭框效果?_第2张图片

Axure中继器怎么制作穿梭框效果?_第3张图片

Axure中继器怎么制作穿梭框效果?_第4张图片

2、接着我们要利用交互实现当鼠标悬停时对应矩形框变色,选中时的效果方框为蓝色并打钩。这里打钩选项我用的是图片,即在选中数据时显示该图片,网友可以去找SVG的图标。

Axure中继器怎么制作穿梭框效果?_第5张图片

Axure中继器怎么制作穿梭框效果?_第6张图片

Axure中继器怎么制作穿梭框效果?_第7张图片

3、然后我们设计移入移出的两个按钮,设置鼠标悬停效果 

Axure中继器怎么制作穿梭框效果?_第8张图片

4、接着我们要实现两个中继器的右移左移,这里可以理解为当点击右移按钮时,数据在左中继器删除了这一行,在右中继器中增加了这一行。先做删除行的效果,以加入右侧按钮为例,点击时我们需要删除左中继器的选中行,因此我们需要在左中继器的单击事件中加入判断,如果选中了则标记行,取消选中则取消标记行,如下图。

Axure中继器怎么制作穿梭框效果?_第9张图片

5、以加入右侧按钮为例,我们要实现点击时删除数据并移动该条选中数据至右中继器,删除数据的效果前面我们已经做了,接下来是在点击加入右侧按钮在右中继器新增行。这个时候我们需要用到全局变量,将需要右移的数据存储进去,然后使右中继器获取数据

1)在左中继器标记行时同时将数据存储进全局变量

2)在点击加入右侧按钮时添加在右中继器添加行,行数据为该全局变量的交互

Axure中继器怎么制作穿梭框效果?_第10张图片

Axure中继器怎么制作穿梭框效果?_第11张图片

6、以上步骤做完后穿梭框的功能就基本完成。接下来网友们再根据自己的需要为穿梭框进行美化就OK啦~

Axure中继器怎么制作穿梭框效果?_第12张图片

Axure中继器怎么制作穿梭框效果?_第13张图片

以上就是Axure中继器制作穿梭框效果的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

Axure怎么制作点击弹框效果?

Axure怎么制作加载动画中的圆环?

axure怎么制作页面标签切换的效果?

你可能感兴趣的:(Axure中继器怎么制作穿梭框效果?)