当前位置： 首页 > news >正文

Axure8.0教程:自动带出邮箱

news 来源：原创 2024/5/17 19:44:17

本次分享的的案例是Axure8.0制作的自动带出邮箱地址效果。

在这里插入图片描述

预览及下载地址：https://51x7ns.axshare.com

一、制作原型
1、拖入一个矩形元件，设置宽度：66px，高度：20px，输入内容：“请输入邮箱”，字体设置为：微软雅黑，如图

在这里插入图片描述

2、拖入一个矩形元件，设置宽度：240x，高度：40px，对其“选中”状态进行设置，如图：

在这里插入图片描述

3、拖入一个文本框在矩形框中，设置宽度：236x，高度：35px，设置类型为：文本，提示文字为：邮箱，提示样式为：#999999，隐藏提示触发选择“获取焦点”，勾选”隐藏边框“
选项，如图：

在这里插入图片描述

4、拖入一个矩形框，设置宽度：240x，高度：173px，命名为：矩形容器，对其阴影样式进行设置，如图
在这里插入图片描述

5、拖入五各矩形框放入”矩形容器“中，设置宽度：240x，高度：40px，分别命名为：1、2、3、4，分别对其进行交互样式设置，如图

在这里插入图片描述

”矩形容器“与其四个矩形组合，并设为隐藏，如图
在这里插入图片描述

最终设计如图：
在这里插入图片描述

二、交互设置
1、对文本框进行”文本改变时“交互设置，
如果文本状态为”ture“时，1的设置文本为[[LVAR1]]@qq.com，如图
在这里插入图片描述

2的设置文本为[[LVAR1]]@126.net，如图
在这里插入图片描述

3的设置文本为[[LVAR1]]@163.com，如图

在这里插入图片描述

4的设置文本为[[LVAR1]]@139.com，如图
在这里插入图片描述

否则，如图：

在这里插入图片描述

2、对文本框进行”获取焦点时“与”失去焦点时“进行设置，如图

在这里插入图片描述

3.对组合的中的每个矩形（1、2、3、4）进行”鼠标点击时“进行设置，如图：

在这里插入图片描述

所有设置完毕。

相关文章：

  • VUE+webrtc-streamer实现实时视频播放（监控设备-rtsp）
  • Java进阶常用的辅助类（CountDownLatch 减法计数器、CyclicBarrier 加法计数器、Semaphore 信号量）
  • HWI的安装及使用
  • 【数据库】MySQL（索引、数据结构、性能、锁、事务等）面试题
  • Cython代码加密, 使用 Cython 将 Python 代码编译为二进制(将整个Django项目编译成功并部署)
  • C# 程序开机自动启动
  • html2canvs的一些问题
  • 金仓数据库 KingbaseES 插件参考手册 S(3)
  • Flutter聊天布局之图片视频上传、显示、保存到相册
  • Deep Laplacian Pyramid Networks for Fast and Accurate Super-Resolution
  • 基于SSM框架实现学生管理系统
  • JavaScript聊天框插入表情: 点击表情时输入框失焦, 无法插入到输入框.
  • 使用esxcli命令升级VMware ESXi补丁
  • java调用python文件的几种方式【超细讲解！】
  • c++ 关于bfs和dfs的相对统一写法
  • [译]CSS 居中（Center）方法大合集
  • JS笔记四：作用域、变量（函数）提升
  • PAT A1092
  • ReactNative开发常用的三方模块
  • 爱情 北京女病人
  • Python 之网络式编程
  • 国内唯一，阿里云入选全球区块链云服务报告，领先AWS、Google ...
  • ​​快速排序（四）——挖坑法，前后指针法与非递归
  • # 安徽锐锋科技IDMS系统简介
  • #Linux（Source Insight安装及工程建立）
  • （MATLAB）第五章-矩阵运算
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (办公)springboot配置aop处理请求.
  • （附源码）springboot青少年公共卫生教育平台 毕业设计 643214
  • （四）JPA - JQPL 实现增删改查
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • .Mobi域名介绍
  • .net MySql
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • .Net面试题4
  • .so文件(linux系统)
  • @AutoConfigurationPackage的使用
  • @configuration注解_2w字长文给你讲透了配置类为什么要添加 @Configuration注解
  • @FeignClient注解，fallback和fallbackFactory
  • @WebService和@WebMethod注解的用法
  • [Android Studio] 开发Java 程序
  • [Android 数据通信] android cmwap接入点
  • [Android]竖直滑动选择器WheelView的实现
  • [C# 基础知识系列]专题十六：Linq介绍
  • [C#]OpenCvSharp使用帧差法或者三帧差法检测移动物体
  • [C#]无法获取源 https://api.nuge t.org/v3-index存储签名信息解决方法
  • [C++] sqlite3_get_table 的使用
  • [CSS]盒子模型
  • [C语言]——C语言常见概念（1）
  • [Django 0-1] Core.Email 模块
  • [ERROR] 不再支持目标选项 5。请使用 7 或更高版本
  • [GXYCTF2019]禁止套娃
  • [HNOI2008]Cards
  • [Invalid postback or callback argument]昨晚调试程序时出现的问题,MARK一下
  • [LeetCode] 196. 删除重复的电子邮箱