编者按:我们没有梭箱的模式，它是一个普通的选择器。今天，作者通过实际操作，与我们分享了如何制作带有中继器的高保真梭框样机。

穿梭框是一种常用的选择器，它用一种直观的方式在左右列表框中移动数据，从而实现数据的多种选择。

所以今天，我想和大家分享一下如何制作一个高保真的带中继器的梭框原型。本教程主要讲解两个中继器之间的联动交互，是一个中高级教程。

原型预览地址:https://yu1cwx.axshare.com

一、材料准备

中继器(含矩形)* 2；背景框* 2；左箭头* 1；右箭头* 2；文字*2，放置如下图所示:

中继器中的矩形需要无界，然后鼠标移入时填充颜色应该是灰色，选中时是蓝色，会有更好的交互感。背景框放在底层，调整合适的大小和位置。

左边是未打开的复读机1，在复读机表中填写相应的选项文本；然后复制到右边，选中中继器2。由于所选中继器默认为0，因此需要删除中继器的所有线路，默认值为空。

中继器1和2需要取消隔离选项组和隔离单选按钮组的效果，两个中继器中的矩形需要设置单选按钮组。文本元素命名为logic 1和logic 2，默认为空，隐藏，然后用于逻辑交互。

二、互动设置

当中继器1的每一项被加载时:将中继器1中的矩形字符设置为列表列0的值，这是中继器的默认设置。

当repeater 1中的矩形鼠标点击:选择当前组件:因为我们之前把选中的颜色设置成蓝色，这样做之后就可以知道选中了哪个项目，而且因为设置了单选组，所以不会同时选中多个项目。

将逻辑1的文本设置为列表列0的值:其实就是记录选中的值，方便左右箭头来回穿梭。

当加载中继器2的每一项，内部矩形鼠标点击时，交互与中继器1相同，但需要注意的是，中继器2中设置的文本是逻辑2的文本。

用鼠标右键点击时:这里需要判断逻辑1的字符是否为空。如果是空，就不会有交互。如果不是空，需要做一个增删行的交互。

增加行：在中继器2里增加行，增加的值为逻辑1文本值；删除行：删除中继器1里的和逻辑1文本值相同的行。

在完成以上两个交互后，我们还需要清除空 logic 1的文本，因为如果空不清楚，我们可以通过单击右箭头无限期地添加同一个选项，所以我们需要在这里清除空 logic 1的文本值。

鼠标左键点击时:左箭头和右箭头的交互其实是一样的。首先要判断逻辑2的文本是否为空。如果是空，则没有选中，所以不会有交互。如果不是空，需要做一个增行和删行的交互，但是这里和中继器1的交互是反过来的。

增加行：在中继器1里增加行，增加的值为逻辑2文本值；删除行：删除中继器2里的和逻辑2文本值相同的行。

将逻辑2的文本值设置为空，就完成了一个实用的梭箱原型。完成后，如果以后需要使用，只需要以左边repeater 1的形式填写选项文本，使用方便。如果有许多选项，您可以将它们复制并粘贴到excel的repeater表单中