Axure中继器怎么制作穿梭框效果?
百度经验 发布时间：2019-11-30 14:03:12 作者：shl020213 
我要评论
我要评论Axure中继器怎么制作穿梭框效果？Axure经常制作网页原型，想要制作一个穿梭框的效果，该怎么制作你额？下面我们就来看看详细的教程，需要的朋友可以参考下
Axure的中继器除了进行列表的增删改外，还可以利用它来实现一些比较复杂的组件，例如穿梭框，这该怎么制作穿梭框呢？下面我们就来看看详细的教程。
1、首先我们需要两个中继器作为左中继器和右中继器，分别加入三个选项
左中继器：选项一、选项二、选项三，
右中继器：选项四、选项五、选项六，
并将中继器的值赋予左中继器_选项，右中继器同理，关于选项的样式各位网友根据自己的心意来哈。
2、接着我们要利用交互实现当鼠标悬停时对应矩形框变色，选中时的效果方框为蓝色并打钩。这里打钩选项我用的是图片，即在选中数据时显示该图片，网友可以去找SVG的图标。
3、然后我们设计移入移出的两个按钮，设置鼠标悬停效果
4、接着我们要实现两个中继器的右移左移，这里可以理解为当点击右移按钮时，数据在左中继器删除了这一行，在右中继器中增加了这一行。先做删除行的效果，以加入右侧按钮为例，点击时我们需要删除左中继器的选中行，因此我们需要在左中继器的单击事件中加入判断，如果选中了则标记行，取消选中则取消标记行，如下图。
5、以加入右侧按钮为例，我们要实现点击时删除数据并移动该条选中数据至右中继器，删除数据的效果前面我们已经做了，接下来是在点击加入右侧按钮在右中继器新增行。这个时候我们需要用到全局变量，将需要右移的数据存储进去，然后使右中继器获取数据
1）在左中继器标记行时同时将数据存储进全局变量
2）在点击加入右侧按钮时添加在右中继器添加行，行数据为该全局变量的交互
6、以上步骤做完后穿梭框的功能就基本完成。接下来网友们再根据自己的需要为穿梭框进行美化就OK啦~
以上就是Axure中继器制作穿梭框效果的教程，希望大家喜欢，请继续关注脚本之家。
相关推荐：
相关文章
Axure怎么设计绝对位置的滑屏插件原型？Axure中想要直走一些网页原型，该怎么制作绝对位置的滑屏插件呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-12-04
Axure怎么制作翻转效果的手机引导页？Axure中想要制作一个引导页，该怎么制作翻转效果的引导页呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-12-03
Axure怎么制作滑动引导页效果的原型？Axure中设计网页原型很简单，想要制作一个华东的引导页，该怎么制作这个动摇交互效果呢？需要的朋友可以参考下2018-12-03
Axure怎么通过变量方式获取输入框中的值？Axure输入框中输入的数值想要获取，该怎么获取呢？下面我们就来看看Axure中获取输入框中数据的教程，需要的朋友可以参考下2018-12-03
Axure图片显示不完整或扭曲该怎么解决？Axure中插入的图片发现只显示上半部分，其他的不显示，该怎么解决呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-12-02
Axure怎么设计调整屏幕亮度效果的效果？Axure设计网页原型很简单，想要制作一个调整屏幕亮度的交互效果，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-11-30
Axure怎么制作手机充话费的界面效果？经常使用网络充值话费，想要制作话费充值页面，该怎么制作呢？下面我们就来看看axure制作话费充值界面的教程，需要的朋友可以参考下2018-11-29
Axure中继器怎么制作饭店菜谱？Axure中想要制作饭店的菜谱，该怎么制作呢？下面我们就来看看Axure使用中继器制作菜谱的教程，需要的朋友可以参考下2018-11-29
Axure怎么制作按钮控制数据递加递减效果？Axure中想要制作一个数字递加递减的效果，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-11-28
Axure怎么制作文字滚动的动态效果？Axure中想要制作一个滚动字幕，该怎么给文字添加滚动效果呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-11-28
最新评论