图形图像

关注公众号 jb51net

关闭
软件教程 > 图形图像 >

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

shl020213

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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐:

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

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

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