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

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

作品基本信息

作品名称:穿梭框

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

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

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

发表回复

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

作品名称:基于LBS定位服务的O2O电商服务小程序高保真交互前后端实战…

继续阅读 →

售价:¥ 180.00 销量: 50 10808
推荐

智慧工地系统以系统的配置、数据的采集及分析为核心,满足不同角色的功能及…

继续阅读 →

售价:¥ 39.90 销量: 25 9718
推荐

我是一名产品经理,本项目显示结果并非完善版本,请勿用于商业生产,所以转…

继续阅读 →

售价:¥ 29.00 销量: 53 8903
推荐

注意事项: 1、字体使用说明: 本原型文件使用了字体:FontAwes…

继续阅读 →

售价:¥ 68.00 销量: 31 14047
推荐

作品名称:丰富易用的企业级App元件库V1.2.0最新版本 作品类型:…

继续阅读 →

售价:¥ 15.00 销量: 120 6601
推荐

作品名称:【劳务招聘】蓝领、白领、自由职业劳务招工高保真原型 文件大小…

继续阅读 →

售价:¥ 99.00 销量: 13 4250