【元件库】常用管理系统的高保真组件 穿梭框 带交互

版权说明:本作品为个人制作,购买用户可直接使用或在本元件基础之上进行修改,请勿进行转卖或分享等操作。

作品基本信息

作品名称:穿梭框

主要功能:为后台管理系统制作高保真原型提供功能组件

作品类型:高保真原型(元件组件)

作品适用:Web端后台管理系统

软件版本:Axure 8.0

作品介绍

本元件库包含:单向穿梭框(无搜索)、单向穿梭框(有搜索)、双向覆盖穿梭框(无搜索)、双向覆盖穿梭框(有搜索)、双向追加穿梭框(无搜索)、双向追加穿梭框(有搜索)。

1.单向穿梭框(无搜索),可实现全选、反选或单个选择功能,进行点选后左侧选项会自动同步至右侧。

穿梭说明:
a.单向穿梭为自动穿梭,点击选中左侧备选项则自动穿梭至右侧已选项栏目;
b.单项穿梭为为操作方便,一般保留原数据,本组件即未制作移除原数据的做法。

控件使用说明:
a.默认状态只有穿梭框左侧有数据,右侧没有数据;若使用场景下左右均有数据,请预先设置左右两侧中继器的值;
b.根据实际情况预设中继器中“id”、“name”、“status”的实际值,其中:
id:数据的唯一辨认依据,保证单个中继器中该字段数据唯一,建议使用数字;
name:选项数据的名称,可根据是情况进行设置,对唯一性没有要求;
staus:表示当前选项的选中状态,0为未选中,1为选中;数据默认为0.
c.若左右两侧均需要预设数据,请保证右侧中继器数据id字段在左侧中继器中存在(对应的数据在左侧的status字段值设为1)。

2.单向穿梭框(有搜索),基于没有搜索的单向穿梭框增加模糊搜索匹配的功能,如下所示:

穿梭说明:
a.单向穿梭为自动穿梭,点击选中左侧备选项则自动穿梭至右侧已选项栏目;
b.单项穿梭为为操作方便,一般保留原数据,本组件即未制作移除原数据的做法。

控件使用说明:
a.默认状态只有穿梭框左侧有数据,右侧没有数据;若使用场景下左右均有数据,请预先设置左右两侧中继器的值;
b.根据实际情况预设中继器中“id”、“name”、“status”的实际值,其中:
id:数据的唯一辨认依据,保证单个中继器中该字段数据唯一,建议使用数字;
name:选项数据的名称,可根据是情况进行设置,对唯一性没有要求;
staus:表示当前选项的选中状态,0为未选中,1为选中;数据默认为0.
c.预设数据时左侧的待选项中继器与搜索项中继器请保证完全一致;
d.若左右两侧均需要预设数据,请保证右侧中继器数据id字段在左侧中继器中存在(对应的数据在左侧的status字段值设为1)。

3.双向覆盖穿梭框(无搜索),如下图所示,支持从左向右穿梭和从右向左穿梭,穿梭方式为覆盖对应内容,应用场景广泛。

穿梭说明:
a.双向穿梭为手动穿梭,在点击选中左侧或右侧栏目中的选项后需要点击穿梭操作执行向左或者向右穿梭;
b.双向穿梭有保留原数据和移除原数据两种方式,本处为保留原数据组件实现。
c.保留原数据的穿梭结果为覆盖穿梭(将其中一侧的数据覆盖至另一侧)

控件使用说明:
a.默认状态只有穿梭框左侧有数据,右侧没有数据;若使用场景下左右均有数据,请预先设置左右两侧中继器的值;
b.根据实际情况预设中继器中“id”、“name”、“status”的实际值,其中:
id:数据的唯一辨认依据,保证单个中继器中该字段数据唯一,建议使用数字;
name:选项数据的名称,可根据是情况进行设置,对唯一性没有要求;
staus:表示当前选项的选中状态,0为未选中,1为选中;数据默认为0.
c.若左右两侧均需要预设数据,请保证左右两侧预设数据的中继器个字段值完全一致(status值可自行决定0或1)。

4.双向覆盖穿梭框(有搜索),在3.双向覆盖穿梭框(无搜索)的基础上增加左右两侧的模糊搜索功能,在直接在搜索列表中选择选中。

穿梭说明:
a.双向穿梭为手动穿梭,在点击选中左侧或右侧栏目中的选项后需要点击穿梭操作执行向左或者向右穿梭;
b.双向穿梭有保留原数据和移除原数据两种方式,本处为保留原数据组件实现。
c.保留原数据的穿梭结果为覆盖穿梭(将其中一侧的数据覆盖至另一侧)

控件使用说明:
a.默认状态只有穿梭框左侧有数据,右侧没有数据;若使用场景下左右均有数据,请预先设置左右两侧中继器的值;
b.根据实际情况预设中继器中“id”、“name”、“status”的实际值,其中:
id:数据的唯一辨认依据,保证单个中继器中该字段数据唯一,建议使用数字;
name:选项数据的名称,可根据是情况进行设置,对唯一性没有要求;
staus:表示当前选项的选中状态,0为未选中,1为选中;数据默认为0.
c.若左右两侧均需要预设数据,请保证左右两侧预设数据的中继器个字段值完全一致(status值可自行决定0或1)。

5.双向追加穿梭框(无搜索),与覆盖穿梭的区别是本穿梭模式是追加穿梭。

穿梭说明:
a.双向穿梭为手动穿梭,在点击选中左侧或右侧栏目中的选项后需要点击穿梭操作执行向左或者向右穿梭;
b.双向穿梭有保留原数据和移除原数据两种方式,本处为移除原数据组件实现。
c.移除原数据的穿梭结果为追加穿梭(将其中一侧的选中数据追加至另一侧)

控件使用说明:
a.默认状态只有穿梭框左侧有数据,右侧没有数据;若使用场景下左右均有数据,请预先设置左右两侧中继器的值;
b.根据实际情况预设中继器中“id”、“name”、“status”的实际值,其中:
id:数据的唯一辨认依据,保证单个中继器中该字段数据唯一,建议使用数字;
name:选项数据的名称,可根据是情况进行设置,对唯一性没有要求;
staus:表示当前选项的选中状态,0为未选中,1为选中;数据默认为0.
c.若左右两侧均需要预设数据,请保证左右两侧预设数据的id字段值不相同(保持本组件内唯一性)。

6.双向追加穿梭框(有搜索),在双向追加的基础上增加两侧的搜索查询功能。

穿梭说明:
a.双向穿梭为手动穿梭,在点击选中左侧或右侧栏目中的选项后需要点击穿梭操作执行向左或者向右穿梭;
b.双向穿梭有保留原数据和移除原数据两种方式,本处为移除原数据组件实现。
c.移除原数据的穿梭结果为追加穿梭(将其中一侧的选中数据追加至另一侧)
d.本元件附带左右两侧数据框内容的关键词模糊查询功能。

控件使用说明:
a.默认状态只有穿梭框左侧有数据,右侧没有数据;若使用场景下左右均有数据,请预先设置左右两侧中继器的值;
b.根据实际情况预设中继器中“id”、“name”、“status”的实际值,其中:
id:数据的唯一辨认依据,保证单个中继器中该字段数据唯一,建议使用数字;
name:选项数据的名称,可根据是情况进行设置,对唯一性没有要求;
staus:表示当前选项的选中状态,0为未选中,1为选中;数据默认为0.
c.设置要求,穿梭框分为左右两侧,同一侧的待选项和搜索项中继器数据请保持完全一致(否则可能出现数据混乱)。
d.若左右两侧均需要预设数据,请保证左右两侧预设数据的id字段值不相同(保持本组件内唯一性)。

另:

由于axure原型对全局变量有数量限制,因此从本元件开始,以后制作的高保真元件不在使用全局变量,改为使用页面内容的文本进行判断,把全局变量留给更需要的场景。提高元件的实用性,元件中隐藏的部分元件请不要删除,可随意放到页面任意位置。

发表回复

以下作品你可能也喜欢:
推荐

该原型为 手机论坛类APP 产品原型 其中包含产品结构图和产品原型图,…

继续阅读 →

售价:¥ 10.00 销量: 104 6128
推荐

智慧社区可以作为近期运营商推动的一个新的业务。物业收费是智慧物业系统必…

继续阅读 →

售价:¥ 29.90 销量: 35 5962
推荐

博观读书是学习类应用,一套完整的项目,文件包括需求的问卷调研、商业需求…

继续阅读 →

售价:¥ 149.00 销量: 8 9065
推荐

作品简介: 作品名称:IBMS智慧楼宇管控平台(实战高保真) 作品标签…

继续阅读 →

售价:¥ 49.90 销量: 26 6625
推荐

让原型,不只是“原型”用心设计,用心售后。 大家好,我是大马猴,又见面…

继续阅读 →

售价:¥ 72.90 销量: 633 47533
推荐

作品名称:TMS 物流管理系统 说明:这个系统当时是准备创业用的,后来…

继续阅读 →

售价:¥ 49.90 销量: 120 25448