Axure教程:下拉多选列表集合(多选下拉列表+单选下拉列表+分级下拉列表)

原型预览:https://qu0b4r.axshare.com/

产品经理,产品经理网站

下面是多选下拉列表的效果介绍,如果想看单选或者多级下拉列表的同学可以看回我之前的文章,或者点击上面原型预览地址查看。

效果演示

1. 整体效果

产品经理,产品经理网站

2. 选中和取消选中

产品经理,产品经理网站

3. 查看全部已选中的标签

默认显示2个标签,鼠标移入看查看全部标签

产品经理,产品经理网站

4. 删除标签取消选中

产品经理,产品经理网站

5. 模糊搜索效果

产品经理,产品经理网站

6. 添加选项效果

产品经理,产品经理网站

7. 全选和全部取消效果

产品经理,产品经理网站

制作教程

1. 制作材料

分为几部分,下拉框和弹出列表,如果需要搜索的话还需要搜索框、全选和取消全选的按钮。

然后ui方面我就不详细说了,大家根据自己的喜好完成就可以了。

2. 下拉框

产品经理,产品经理网站

如上图所示制作成组合,分别有矩形,中继器,箭头符号

中间的是用中继器来做的,默认显示项为2,鼠标移入时不限,鼠标移出时为2。每项加载时,设置文本=item.column0,默认为空不用填,下面会说到利用弹出列表内的中继器把内容导过来。点击中继器的X按钮,这里并不是删除改行,是取消弹出列表内的中继器对应行的选中,简单来说说就是这个中继器只是内容的显示。

鼠标点击该组合时,切换弹出列表的可见性。然后旋转箭头180度,这里也可以用上下两个箭头,然后切换他们的可见性。

3. 弹出列表

弹出列表由背景框,内容中继器、搜索框全选和全部取消按钮组成,

产品经理,产品经理网站

3.1 中部内容中继器

材料:文本+多选按钮。这里系统的多选按钮太丑,所以我美化了一下,具体可以看回我之前的文章《建议收藏:Axure交互常用按钮组》

交互逻辑:

在中继器里填写内容,然后每项加载时将内容设置到文本。

点击多选框的时候切换选中和取消,如果选中时,添加行到上面说到的下拉框标签中继器,如果取消选中时,删除下拉框标签中继器对应行。

3.2 搜索

这里这需要对中继器做模糊搜索就可以了,需要用到index函数,对搜索框内的输入的内容进行筛选。具体公式[[Item.text.indexOf(LVAR1)>-1]],item.text就是中继器表格的内容列,LVAR1是文本框输入内容。

3.3 全选和全部取消

这个很简单,鼠标单击全选时,让中继器内所有行都选中;鼠标单击全部取消时,让中继器内所有行都取消去选中

今天的分享到这里就结束了,喜欢原型或者有疑问的小伙伴们可以在下方评论处给我留言哦,我们下期见。

 

本文作者 @梓贤Vigo

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部