Axure教程—穿梭框(中继器+动态面板)

news/2025/2/2 0:48:21/

本文将教大家如何用AXURE中动态面板和中继器制作穿梭框效果
一、效果
在这里插入图片描述
预览地址:https://8k99mh.axshare.com
下载地址:https://download.csdn.net/download/weixin_43516258/87897661?spm=1001.2014.3001.5503

二、功能

  • 在待选区域选项中可以选择一个选项,选中后点击右箭头可以设置到已选区域

  • 在已选区域选项中可以选择一个选项,选中后点击左箭头可以设置到待选区域

  • 如果没有选择选项,则提示选择
    三、制作

    1、待选区域
    拖入一个矩形,大小设置为202×40,命名为待选区域,设置文字为“待选区域(可选12项)”,如图:

在这里插入图片描述
在矩形下方拖入一个动态面板,命名为左,如图:
在这里插入图片描述
在动态面板中再拖入一个动态面板,其大小要超过本动态面板,方便内容多显示滚动条。如图:
在这里插入图片描述

在动态面板里加入中继器,命名为left,其中继器赋值,如图:
在这里插入图片描述
在中继器中加入一个矩形,大小为200×40,并对其样式进行设置,如图:
在这里插入图片描述
2、左右箭头按钮

拖入两个矩形,上下排版,分别命名为left_sl和right_sl,如图:
在这里插入图片描述
3、已选区域
拖入一个矩形,大小设置为202×40,命名为已选区域,设置文字为“已选区域(已选0项)”,如图:
在这里插入图片描述
在矩形下方拖入一个动态面板,命名为右,如图:
在这里插入图片描述
在动态面板中再拖入一个动态面板,其大小要超过本动态面板,方便内容多显示滚动条。如图:
在这里插入图片描述

在动态面板里加入中继器,命名为right,其中继器赋值,如图:

在这里插入图片描述
在中继器中加入一个矩形,大小为200×40,并对其样式进行设置,如图:
在这里插入图片描述

4、提示框

拖入一个动态面板,其命名为提示框,在提示框中默认设置,并设置为隐藏状态,如图:
在这里插入图片描述
最终设计如图:
在这里插入图片描述
四、交互

1、left(左)中继器
每项加载时设置,如图:

在这里插入图片描述
中继器内的矩形设置,如图
在这里插入图片描述
2、箭头按钮
left_sl(左箭头)按钮设置,如图:
在这里插入图片描述
right_sl(右箭头)按钮设置,如图:
在这里插入图片描述
3、right(右)中继器

 每项加载时设置,如图:

在这里插入图片描述
中继器内的矩形设置,如图
在这里插入图片描述
所有制作完成。


http://www.ppmy.cn/news/345979.html

相关文章

VMware Workstation踩坑

VMware Workstation踩坑 在学习VMware Horizon View的搭建中,使用Vmare Workstation安装一台server2016虚拟机,配置好虚拟机的相关信息以后,将Composer组件的安装包上传到虚拟机中,然后开始安装,报如下错误&#xff1…

按键电路设计

1.按键消抖 与按键并联的电容是为了消除案件抖动。 所谓按键抖动就是指按键中的机械触点在接触或者断开的瞬间,在很小的时间片段上,处于一种似连非连,似断非断的状态。这个时片段往往几毫秒,虽然按下按键的我们完全无法感知&#…

hashmap的11连问

文章目录 标题1、HashMap 了解吗?平时在什么地方使用过它呢?(说明:发现没有,我喜欢问使用场景,希望大家也是能够思考使用场景的,因为掌握了这个,你说话更加有说服力)标题…

22252

随着互联网的普及和数字化的趋势,数据库管理变得越来越重要。一个高效的数据库管理系统可以提高数据的安全性,提升数据处理速度和准确性。数据库管理不仅仅是将数据存储在一个地方,还包括对数据进行备份和恢复、监控和调优等等。一个好的数据…

23.5.02

下面几题没有理清楚思路

SMTP2BOT | 群晖 消息推送到teleg bot

环境:群晖Docker 问题:想要群晖系统通知到手机APP,server酱没有邮件丰富,邮件还要安装邮件客户端,钉钉和企业微信都是webhook转的,内容不够丰富,只能显示短信的内容 解法:用docker…

redis rdb文件备份还原 linux 持续更新

查看redis当前key的数量 127.0.0.1:6379> info keyspace # Keyspace db0:keys2525,expires0,avg_ttl0bgsave备份redis db库 127.0.0.1:6379> config get dir #获取当前redis备份数据目录 1) "dir" 2) "/usr/local/redis/data"3. 清理redis数据 将…

CNVD-2023-12632 泛微e-cology9 sql注入 附poc

目录 漏洞描述影响版本漏洞复现漏洞修复 漏洞描述 泛微 E-Cology9 协同办公系统是一套基于 JSP 及 SQL Server 数据库的 OA 系统,包括知识文档管理、人力资源管理、客户关系管理、项目管理、财务管理、工作流程管理、数据中心等打造协同高效的企业管理环境&#…