axure用中继器做穿梭框制作方法
中继器的英文叫做"Repeater"表示重复的意思,其实中继器有个数据集的概念,所谓的数据集就是这个中继器所要处理的数据源,学习它的使用有助于我们快速设计一些复杂的交互界面。穿梭框是常常会用到的一个选择器,它可以让我们在左右列表框移动数据,实现数据的多项选择。
一、材料准备
1、中继器内含矩形*2;背景框*2;左箭头*1;右箭头*2;文本*2。
2、中继器内需要取消矩形的边框,设置鼠标移入时填充颜色为灰色,选中时填充颜色为蓝色,方便有更好的交互体验感。
3、将背景框调整到合适的大小和位置,放置底层。
4、左边的是未选项中继器1,需要在中继器表格内填写对应选项文字;复制到右面为已选项中继器2,由于已选项默认为0,所以需要删除中继器所有行,默认空值即可。
5、中继器1和2均需取消隔离选项组和隔离单选按钮组效果,两个中继器内的矩形需要设置单选组。
6、文本元件命名为逻辑1和逻辑2,默认为空且隐藏,后续用于逻辑交互。
二、交互设置
中继器1每项载入时:
中继器默认交互 - 设置中继器1内矩形文字为列表Column0的值。
中继器1内矩形鼠标单击时:
因为之前我们设置了选中的颜色变蓝,所以当我们点击之后就可以知道选中了那一项,而且因为设置了单选组,所以也不会同时选中多个。
设置逻辑1的文本为列表Column0的值,以方便后面左右箭头穿梭的操作。
中继器2每项加载时及内部矩形鼠标单击时:
中继器2和1的交互一样,但是需要注意的是中继器2里面设置的文本是逻辑2的文本。
右箭头鼠标单击时:
逻辑1的文字如果为空就是还没选中,不发生交互;如果不为空,需要做一个增加行和删除行的交互。
增加行:在中继器2中增加行,增加的值为逻辑1文本值。
删除行:删除中继器1里的和逻辑1文本值相同的行。
完成上述两个交互之后,我们需要清空逻辑1的文本,不清空的话点击右箭头就可以无限增加同一个选项。
左箭头鼠标单击时:
这个和【右箭头鼠标单击时】的设置交互是反过来的。
增加行:在中继器1里增加行,增加的值为逻辑2文本值。
删除行:删除中继器2里的和逻辑2文本值相同的行。
设置逻辑2的文本值为空值。
axure用中继器做联级框步骤
中继器的英文叫做"Repeater"表示重复的意思,其实中继器有个数据集的概念,所谓的数据集就是这个中继器所要处理的数据源,学习它的使用有助于我们快速设计一些复杂的交互界面。
一、文本框
1、首先我们需要在画面中拖入矩形,模拟输入框,并填入文字“请选择”。
2、接着为文本框设置【悬停】、【选中】、【获取焦点】的交互样式。
3、获得文本框模型。
二、联级框
1、拖入三个中继器,分别命名为【L1】、【L2】、【L3】作为一级、二级、三级的联级列表。
2、接着做好数据填充,设置【每项加载】,分别将【Item.L1】、【Item.L2】、【Item.L3】赋值给到【L1】、【L2】、【L3】。
3、在填充数据的时候,建议先用 Excel 做好数据备份,以便后续修改使用。并且中继器数据是支持直接通过 Excel 复制黏贴到中继器的数据表中的。
三、交互设置
1、用鼠标选中【L1】的中继器,双击选中【L1】文本标签,为它交互动作 -【单击时】设置切换选中效果。
2、为【选中时】状态添加设置文本,将【Item.L1】赋值给到【sel_L1】的文本标签。
3、同时向目标对象【L2】中继器添加筛选设置,规则为[[Item.L1==TargetItem.L1]],在“移除其他筛选”【取消选中时】前面进行勾选。
4、将【sel_L1】设置为空值,且移除【L2】的筛选,同时隐藏【L2】,并且显示【L2】中继器。
5、同样,【L3】需要设置切换选中的交互动作,但【选中时】仅需将【Item.L3】赋值给到【sel_L3】文本标签,且【取消选中时】将【sel_L3】设置为空值。