1. 主页 > 行业资讯 > 设计文章 >

Axure教程:使用中继器作为穿梭箱

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

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

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

原型预览地址: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表单中

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/510.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息