Axure9:弹出提示框(登录示范,多种情况)

本文介绍了如何使用Axure9设计登录界面的弹窗提示,包括登录成功、用户名和密码错误等多种情况。详细步骤涵盖了动态面板的创建、不同状态的设置以及交互逻辑的实现,确保在用户输入时提供清晰的反馈,并演示了登录成功后跳转页面的配置方法。

效果图:

在这里插入图片描述

登录成功:显示提示框,并会跳转到下一页面

在这里插入图片描述

用户名不能为空:

在这里插入图片描述

登录密码不能为空:

在这里插入图片描述
用户名或密码不正确
在这里插入图片描述

设置步骤:

1.添加动态面板,设置长宽,设置动态面板名字

2.点击动态面板、状态1,然后添加提示框和文字,设置状态1的名字为登录成功

3.为了规范和方便,将提示框和文字进行组合

4.添加多种提示框,右键单击状态1,选择添加状态

5.设置状态2的名字用户名不能为空,点击动态面板、状态2,然后添加提示框和文字

设置后如图:

在这里插入图片描述

6.设置动态面板的交互,显示时:等待3000ms和显示/隐藏,隐藏当前逐渐300ms
在这里插入图片描述

7.选中登录按钮,设置交互,先添加几个情形,登录成功、用户名不能为空、密码不能为空、用户名或密码不正确

具体操作:
(1)新建交互,选中单击时
在这里插入图片描述
(2)添加情形1、2、3、4
在这里插入图片描述
情形1:登录成功
在这里插入图片描述
情形2:用户名不能为空
情形3:登录密码不能为空
情形4:用户名或密码不正确

(3)添加后效果如下
在这里插入图片描述

8.单击时:登录成功的条件:Login为“已登录”;设置面板状态,“吐司提示”到“登录成功”;显示、隐藏,显示土司提示逐渐300毫秒bring to front;等待1000ms,打开链接:设置要跳转到的页面
具体操作示例:
(1)在登录成功情形中添加动作设置变量值
在这里插入图片描述
(2)设置变量值中添加变量Login
在这里插入图片描述
在这里插入图片描述
(3)设置变量值 Login为“已登录”
在这里插入图片描述
(4)设置面板状态,吐司提示到登录成功
(5)设置显示/隐藏,显示吐司提示逐渐300ms 选中置于顶层
在这里插入图片描述
(6)等待1000ms
(7)设置登录成功要跳转到的页面,设置打开链接,选中页面
在这里插入图片描述
(8)全部设置完成后的效果
在这里插入图片描述
9.设置吐司提示为不可见
在这里插入图片描述
10.中间部分内容设置为内容框架的动态面板

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值