开平市建设工程站网站,做公司自主网站,宝塔面板做网站不能打开PHP显示404,人网站建站多选下拉列表常用于需要用户从一组选项中选择多个选项的情况。它提供了一个下拉菜单#xff0c;用户可以点击展开并选择他们感兴趣的多个选项。多选下拉列表可以用于展示可选标签#xff0c;并允许用户选择多个标签。例如#xff0c;在一个博客发布界面上#xff0c;可以…多选下拉列表常用于需要用户从一组选项中选择多个选项的情况。它提供了一个下拉菜单用户可以点击展开并选择他们感兴趣的多个选项。多选下拉列表可以用于展示可选标签并允许用户选择多个标签。例如在一个博客发布界面上可以使用多选下拉列表选择适用的标签。
所以今天就教大家在Axure里如果用中继器制作一个多选下拉列表并且根据已选项自动生成标签的原型模板。
一、效果展示
1、点击下拉列表框可以弹出选项点击选项可以选中选项或者取消选中
2、根据已选内容自动显示对应的标签并且根据标签数量自动调整下拉框的尺寸
3、取消选中时对应标签自动删除也可以点击标签里的删除按钮删除并取消选中
4、选项信息可以在中继器表格里维护选项较多时可以通过滚动条上下查看选项。 【原型预览】
https://axhub.im/ax9/09b38389df30358f/#g1p根据标签数自动调整尺寸
【原型下载】
方式1加入原型分享群后可免费分享该原型请咨询微信522073109
方式2https://weidian.com/item.html?itemID3566743034 二、制作教程
1、用中继器制作选项
我们新增一个中继器在中继器里添加文本标签背景矩形以及多选按钮这里我们因为想自定义多选按钮的样式所以我们没有用系统多选按钮我们用动态面板来制作增加两个状态一个是未选中状态一个是选中的状态分别导入选中和未选中的多选按钮的素材。当然你们也可以用系统的多选按钮来制作分别将他们放入两个状态里但是需要用个热区挡住他因为后续是否选中是通过中继器里的值控制的并不是通过点击直接改变的。如下图所示摆放 中继器表格里我们增加两列
text列在该列添加选项名有几个选项就填写几行
xuanzhong列用来控制对应行的选项是否被选择一般如果默认没有选中项的话不填即可如果项默认某个选项选中就在该选项xuanzhong列的值填写1 在中继器每项载入时我们首先用设置文本的交互将text列选项的值设置到文本标签里。
然后我们还要根据xuanzhong列的值来设置动态面板是选中还是未选中的状态。如果xuanzhong列的值等于1那么我们用将动态面板设置到选中状态如果不等于1我们就设置到未选中的状态不过这里不等于1的情况可以不用写因为他默认就是未选中的状态。 2、鼠标单击选项时的交互
鼠标单击选项时我们要根据判断该选项是否已经被选中如果已被选中我们就将他设置为未选中因为控制他是否选中是通过中继器里选中列的值来控制的所以我们用更新行的交互将中继器里xuanzhong列的值更新为0即可如果未被选中我们就将他设置为选中用更新行的交互将中继器里xuanzhong列的值更新为1即可。 3、将中继器转为动态面板
这样我们就基本完成了下拉选项如果选项较多这个选项就会很常所以我们把它转为动态面板取消面板自适应尺寸并且调出垂直滚动条这样就可以控制显示选项的尺寸在选项较多时还可以上下滚动查看更多选项。
如果觉得系统的滚动条不太好看的话我们还可以通过再次转为动态面板然后用外面板遮挡住大部分或全部内面板的滚动条这样去美化一下。
然后我们在底部增加一个背景矩形将他们组合在一起这样下拉选项就做好了
4、下拉框的制作
下拉框我们需要用到矩形上下箭头以及中继器标签组
鼠标单击这个组合时我们用显示的交互将下拉选项显示出来这个我们可以选择灯箱效果这样点击其他空白的地方下拉选项就可以自动收起来 当然我们也可以增加一些交互样式让他更加美化增加矩形选中和禁用样式鼠标移入移出或者下拉选项显示隐藏时触发这些样式因为每个人审美不一样这些你们自行处理即可。
4、中继器标签组
前面说到下拉框组合里需要有一个中继器标签组我们现在来制作
需要再中继器里增加背景矩形文字标签和删除按钮文字标签我们转为动态面板因为考虑到有些选项太长我们就自显示前面部分即可。如下图所示摆放即可 中继器表格里不需要修改用自带的Column0列即可默认中继器表格为空。中继器布局为水平按网格排布案例中是每行项目数是2。
在中继器每项加载时我们用设置文本的交互将Column0列的值设置到文本标签里 这样标签组就只做完成了。
5、选项和标签的联动
接下来我们要让选项和标签进行联动在选项中继器里该选项被选中我们就用添加行的交互将该选项的选项值增加的标签中继器里。这里需要注意的是因为中继器每次更新都会从头加载所以在一开始如果直接添加行的话选第二个选项之后就会发现之前第一次添加的标签重复添加了。所以我们在一开始的时候要对标签中继器做一个还原的操作我们可以用删除所有行的方式让选中之前的标签中继器处于一个原始为空的状态。 我们要删除标签的话我们也不是用删除行的方式删除标签里对应的行。因为我们是通过下拉选项中继器里的值来控制具体显示的标签所以如果我们想让标签删除我们就用更新行的交互将和标签名称一样的行的xuanzhong列的值更新为0这样就可以把标签删除。 这样我们就基本完成了但是我们还需要考虑标签太多的情况
6、设置下拉框的尺寸
我们可以根据标签中继器的尺寸来设置外框的尺寸。
当所有标签加载完成后我们用设置尺寸的交互首先设置下拉框的尺寸宽度保持不变高度就是标签组的高度上下的边距这样就可以外框就可以变高。
同事我们还要用移动的事件移动下拉选项组合移动到下拉框的底部这样就可以根据标签的多少自动调整下拉框的尺寸。 这样我们就完成了多选下拉列表自动生成标签原型模板的制作了下次使用也很方便我们只需要在下拉选项中继器表格里填写选项值即可自动生成交互效果。
那以上就是本期教程的全部内容感兴趣的同学们可以动手试试哦感谢您的阅读我们下期见。
