内容简介:前段时间分享过一个支持单选的穿梭器(列表框左右双向选择)案例,很多朋友觉得很赞,同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列分享,教大家使用Axure制作实现“穿梭器:双向列表带计数选择(支持单选、多选和全选)”。
前段时间分享过一个支持单选的穿梭器(列表框左右双向选择)案例,很多朋友觉得很赞,同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列分享,教大家使用Axure制作实现“穿梭器:双向列表带计数选择(支持单选、多选和全选)”。
一、演示地址
二、实现效果
- 双向列表均支持单选、多选或全选;
- 移入选项、点击选项时分别有文字颜色或背景色的变化,突出选项;
- 如果左侧选项没有选中,点击向右选择时,出现错误提示信息;
- 如果右侧选项没有选中,点击向左选择时,出现错误提示信息;
- 点击全部选择时,左侧数据全部移入右侧;点击全部取消时,右侧数据全部移入左侧;
- 每次选择变动后,可选项和已选项的数据都会相应变化;
- 当可选项或已选项为0时,可选项和已选项的数据也能正确显示。
三、原理分析
- 提供左右两个列表框,两边的数据内容一致,数据是否显示的状态互斥;
- 左边为待选项的容器,初始状态全部为1,表示全部可见;
- 右侧为已选项的容器,初始状态全部为0,表示全部不可见;
- 当选中左边的选项,确认执行选择时,将左边选中项状态设置为0,同时将右边对应的选项设置为1;
- 执行完成后,左边选中的数据隐藏,右边显示左侧隐藏的数据;
- 取消选择的方法原理相同;
- 点击全部选择时,将左侧所有数据状态全部设置为0,同时将右边全部数据状态设置为1(不需考虑之前的数据显示状态);
- 执行非全选时,如果没有选择数据项,则给出错误提示即可;
注:单选穿梭器案例是采用变量赋值方法制作,由于中继器不支持同时插入多条数据,故多选案例不能用变量方法实现。
四、元件准备
- 待选城市文本标签,用于显示待选城市的计数
- 待选项背景框(left_bg),放在待选项底部
- 待选项动态面板(left),用来存放可供选择的列表项;left面板中包含一个动态面板,放置中继器left;中继器left中用来存储可供选择的列表项
- 选项矩形(left_sl),触发左侧待选项移入右侧已选项
- 选项矩形(right_sl),触发右侧已选项移入左侧待选项
- 选项矩形(全部选择),触发左侧待选项全部移入右侧已选项
- 选项矩形(全部取消),触发右侧已选项全部移入左侧待选项
- 已选城市文本标签,用于显示已选城市的计数
- 已选项背景框(right_bg),放在已选项底部
- 已选项动态面板(right),用来存放已经选择的列表项;right面板中包含一个动态面板,放置中继器right;中继器right用来存储已经选择的列表项
- 操作提示组合元件,用于没有选择选项时的错误
隐藏提示文件,重新布局元件后效果如下:
五、实现步骤
1. 准备左侧待选项列表数据
拖入一个中继器left,中继器存储city、state两列数据,city列添加21条数据,对应显示广东省21个地市,state列全部为1(此处1表示可见):
将中继器的数据通过每项加载时赋值给矩形,矩形显示的数据就是待选项源数据:
将中继器转换为动态面板sleft,动态面板的大小为218px*200px。设置动态面板的滚动条属性为“自动显示垂直滚动条”:
实用小技巧:将可滚动的动态面板sleft转换为动态面板left,动态面板的大小为200px*200px。设置动态面板的滚动条属性为“无”,从而可以实现滚动且隐藏滚动条的效果。
在动态面板left底部放一个带边框的矩形背景,大小为202px*202px,在矩形背景的上面部分放待选城市文本标签,用于显示待选城市的计数。最终左侧待选项列表元件数据显示如下:
2. 准备右侧已选项列表数据
拖入一个中继器right,中继器存储city、state两列数据,city列添加21条数据,对应显示广东省21个地市,state列全部为0(此处0表示不可见)
右侧其余的实现原理与左侧一致,最终右侧已选项列表元件数据显示如下:
3. 设置全局变量,临时存放选中项
设置全局变量“select_listl”,用来临时存放左侧待选项选中的数据;全局变量“select_listr”,用来临时存放右侧已选项选中的数据;全局变量的默认初始值均为空值。
4. 待选项点击交互事件
待选项矩形框用来显示待选项数据列表,分别设置鼠标悬停、鼠标放下、选中时的交互效果。
鼠标单击待选项矩形框时,切换选中状态。当待选项状态为选中时,将全局变量”select_listl”的值设置为“当前值+1”,同时标记该行;当待选项状态为取消选中时,将全局变量”select_listl”的值设置为“当前值-1”
5. 设置待选城市文本标签事件
中继器left的的数量值等于可选项的数据值,中继器载入时,需要添加筛选,只显示state为1 的数据。每项加载时,设置待选城市的文本显示为“待选城市(可选[[Item.Repeater.dataCount]]项)”
中继器赋值方法如下,文本格式为“富文本”
[[Item.Repeater.dataCount]]表示中继器的数量值,利用富文本特性改变选项值的文本颜色:
6. 已选项点击交互事件
已选项点击交互事件同待选项点击交互事件一致,此处不再重复。
7. 设置已选城市文本标签事件
已选城市文本标签设置与待选城市文本标签设置一致,此处不再重复。
8. 左侧向右选择点击事件
点击“>>”按钮时,需要判断该点击事件是否为有效点击事件。
左侧待选项有选中状态时,全局变量“select_listl”不为空,点击事件有效,需要将左侧选中数据的状态更新为0,同时将右侧相同数据状态更新为1。 特别注意:此处需要将待选项及已选项的选中标志全部取消
当左侧待选项没有选中状态时,点击事件无效,提示“请从待选城市选择数据项!”
9. 右侧向左选择点击事件
点击“<<”按钮时,需要判断该点击事件是否为有效点击事件。
右侧已选项有选中状态时,全局变量“select_listr”不为空,点击事件有效,需要将右侧选中数据的状态更新为0,同时将左侧相同数据状态更新为1。特别注意:此处需要将待选项及已选项的选中标志全部取消
当右侧已选项没有选中状态时,点击事件无效,提示“请从已选城市选择数据项!”。
10. 全部选择点击事件
点击“全部选择”按钮时,不管左侧是否选中,也不需要考虑左侧还有多少待选项。直接将左侧所有数据状态改为0,将右侧所有数据状态改为1,同时取消所有数据选择状态。
11. 全部取消点击事件
点击“全部取消”按钮时,不管右侧是否选中,也不需要考虑右侧还有多少已选项。直接将右侧所有数据状态改为0,将左侧所有数据状态改为1,同时取消所有数据选择状态。
实用小技巧:利用显示事件的“灯箱效果”,背景色为黑色,透明度设置为20%。提示效果很漂亮。
本案例已完成,点击查看上一篇案例《 Axure教程:省市县三级联动选择(全国省市区数据) 》
本文由 @十月大神 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Unsplash,基于CC0协议。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。