Axure高保真原型:多选下拉列表寡妇上联:昨日今日明日,日复一日,铁匠对出下联,寡妇感动落泪

2023-06-27 0 707

多选下拉列表能用作展现可选条码,并容许使用者优先选择数个条码,那么该如何利用Axure里用网络连接制做三个半选下拉列表。译者归纳了相关关键步骤,期望对你略有协助。

Axure高保真原型:多选下拉列表寡妇上联:昨日今日明日,日复一日,铁匠对出下联,寡妇感动落泪

多选下拉列表常见作须要使用者从几组快捷键中优先选择数个选项的情况。它提供了三个输入框,使用者能点选进行并优先选择她们钟爱的数个快捷键。多选下拉列表能用作展现可选条码,并容许使用者优先选择数个条码。比如,在三个网志发布界底下,能使用多选下拉列表优先选择适用于的条码。

所以今天就教大家在Axure里如果用网络连接制做三个半选下拉列表,因此依照已快捷键手动聚合条码的蓝本模版。

一、效用展现

1、点选下拉列表框能弹出快捷键,点选快捷键能选上快捷键或是中止选上

2、依照已选文本手动显示相关联的条码,因此依照条码数目手动调整下拉框的体积

3、中止选上时,相关联条码手动删掉,也能点选条码里的删掉按键删掉并中止选上

4、快捷键重要信息能在网络连接表单里保护,快捷键非常多时,能透过快捷方式每边查阅快捷键

Axure高保真原型:多选下拉列表寡妇上联:昨日今日明日,日复一日,铁匠对出下联,寡妇感动落泪

蓝本门牌号:https://g8a5mh.axshare.com/#g=1

二、制做讲义

1. 用网络连接制做快捷键

她们追加三个网络连接,在网络连接里加进文档条码,大背景正方形,以及多选按键,这里她们即使想自订多选按键的式样,因此她们没有用控制系统多选按键,她们用静态液晶来制做,增加三个状况,三个是未选上状况,三个是选上的状况,依次引入选上和未选上的多选按键的片断。

总之你们也能用控制系统的多选按键来制做,依次将她们放进三个状况里,但是须要用个西厄县压住他,即使先期与否选上是透过网络连接里的值控制的,并不是透过点选直接发生改变的。如下表所示图右图放置:

网络连接表单里她们增加两列:

text列:在该列加进快捷键名,有几个快捷键就填写几行xuanzhong列:用来控制相关联行的快捷键与否被优先选择,一般如果默认没有选上项的话,不填即可,如果项默认某个快捷键选上,就在该快捷键xuanzhong列的值填写1
Axure高保真原型:多选下拉列表寡妇上联:昨日今日明日,日复一日,铁匠对出下联,寡妇感动落泪

在网络连接每项载入时,她们首先用设置文档的交互,将text列快捷键的值设置到文档条码里。

然后她们还要依照xuanzhong列的值来设置静态液晶是选上还是未选上的状况。如果xuanzhong列的值等于1,那么她们用将静态液晶设置到选上状况;如果不等于1,她们就设置到未选上的状况,不过这里不等于1的情况能不用写,即使他默认就是未选上的状况。

Axure高保真原型:多选下拉列表寡妇上联:昨日今日明日,日复一日,铁匠对出下联,寡妇感动落泪
广告
美女秀场 真人直播 >>进入直播间与主播亲密互动
×
2. 鼠标单击快捷键时的交互

鼠标单击快捷键时,她们要依照判断该快捷键与否已经被选上,如果已被选上,她们就将他设置为未选上,即使控制他与否选上是透过网络连接里选上列的值来控制的,因此她们用更新行的交互,将网络连接里xuanzhong列的值更新为0即可;如果未被选上,她们就将他设置为选上,用更新行的交互,将网络连接里xuanzhong列的值更新为1即可。

Axure高保真原型:多选下拉列表寡妇上联:昨日今日明日,日复一日,铁匠对出下联,寡妇感动落泪
3. 将网络连接转为静态液晶

这样她们就基本完成了下拉快捷键,如果快捷键非常多,这个快捷键就会很常,因此她们把它转为静态液晶,中止液晶

如果觉得控制系统的快捷方式不太好看的话,她们还能透过再次转为静态液晶,然后用外液晶遮压住大部分或全部内液晶的快捷方式,这样去美化一下。

然后她们在底部增加三个大背景正方形,将她们组合在一起,这样下拉快捷键就做好了。

4. 下拉框的制做

下拉框她们须要用到正方形,每边箭头,以及网络连接条码组。

鼠标单击这个组合时,她们用显示的交互,将下拉快捷键显示出来,这个她们能优先选择灯箱效用,这样点选其他空白的地方,下拉快捷键就能手动收起来。

总之她们也能增加一些交互式样让他更加美化,增加正方形选上和禁用式样,鼠标移入移出或是下拉快捷键显示隐藏时,触发这些式样,即使每个人审美不一样,这些你们自行处理即可。

4. 网络连接条码组

前面说到下拉框组合里须要有三个网络连接条码组,她们现在来制做。

须要再网络连接里增加大背景正方形,文字条码和删掉按键,文字条码她们转为静态液晶,即使考虑到有些快捷键太长,她们就自显示前面部分即可。如下表所示图右图放置即可。

网络连接表单里不须要修改,用自带的Column0列即可,默认网络连接表单为空。网络连接布局为水平,按网格排布,案例中是每行项目数是2。

在网络连接每项加载时,她们用设置文档的交互,将Column0列的值设置到文档条码里。

这样条码组就只做完成了。

5. 快捷键和条码的联动

接下来她们要让快捷键和条码进行联动,在快捷键网络连接里,该快捷键被选上,她们就用加进行的交互,将该快捷键的快捷键值增加的条码网络连接里。这里须要注意的是,即使网络连接每次更新都会从头加载,因此在一开始如果直接加进行的话,选第二个快捷键之后,就会发现之前第一次加进的条码,重复加进了。

因此她们在一开始的时候,要对条码网络连接做三个还原的操作,她们能用删掉所有行的方式,让选上之前的条码网络连接处于三个原始为空的状况。

Axure高保真原型:多选下拉列表寡妇上联:昨日今日明日,日复一日,铁匠对出下联,寡妇感动落泪

她们要删掉条码的话,她们也不是用删掉行的方式,删掉条码里对应的行。即使她们是透过下拉快捷键网络连接里的值来控制具体显示的条码,因此如果她们想让条码删掉,她们就用更新行的交互,将和条码名称一样的行的xuanzhong列的值更新为0,这样就能把条码删掉。

这样她们就基本完成了,但是她们还须要考虑条码太多的情况。

6. 设置下拉框的体积

她们能依照条码网络连接的体积,来设置外框的体积。

当所有条码加载完成后,她们用设置体积的交互,首先设置下拉框的体积,宽度保持不变,高度就是条码组的高度+每边的边距,这样就能外框就能变高。

同事她们还要用移动的事件,移动下拉快捷键组合,移动到下拉框的底部,这样就能依照条码的多少,手动调整下拉框的体积。

Axure高保真原型:多选下拉列表寡妇上联:昨日今日明日,日复一日,铁匠对出下联,寡妇感动落泪

这样她们就完成了多选下拉列表(自动聚合条码)蓝本模版的制做了,下次使用也很方便,她们只须要在下拉快捷键网络连接表单里填写快捷键值,即可手动聚合交互效用。

那以上就是本期讲义的全部文本,钟爱的同学们能动手试试哦,感谢您的阅读,她们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表译者本人,人人都是产品经理平台仅提供重要信息存储空间服务。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务