AI 前线导读:FreeWheel 创建于 2007 年,总部位于美国硅谷,作为一家提供互联网视频广告投放、监测、预测、增值等解决方案的 IT 公司,其已为 CBS、Warner Brothers、Turner、Discovery 等公司提供服务...
2019-01-08 113
今天和大家分享一个忘记密码表单特效,enjoy~
我们先看一下,本案例使用到的元素:
文本部分,我们就咱不做介绍了,这里依次说一下“输入框”的设置 & “动态面板”的设置。
我们从元件库,拖拽一个文本框至对应位置,然后设置它的属性。如图所示:
(1)动态面板A-line
我们首先创建一个动态面板,命名为line,并且创建4种不同的面板状态:
default:默认状态
fcouse:输入框获得焦点状态
true:输入框值验证通过状态
flase:输入框值验证不通过状态
每种状态,使用不同颜色的线条来表示
(2)动态面板B-button
我们在创建一个动态面板,命名为button,同样创建三种状态:
default:默认显示submit字样的按钮
false:显示The account could not be found字样的按钮
true:显示Email has been sent字样的按钮
(3)动态面板C-reset
最后创建一个reset的动态面板,用于恢复“line”&“button”2个动态面板至默认状态。
(1)输入框交互
我们选择输入框,双击“获取焦点时”,设置动态面板(line)显示“fcouse”状态。
同样,给输入框添加“失去焦点时”的交互,这里会要考虑到一个问题,如果输入框有值得情况下,我们就不做任何变更;如果失去焦点时,输入框没有值,则设置动态面板为default状态。
条件设置如下:
动作设置如下:
(2)button动态面板交互
button动态面板,前面说到过存在3种状态,所以我们要对点击动作进行条件判断,当点击按钮时,如果输入框值为demo@demo.com,则显示true状态,否则显示false状态。
(3)reset动态面板交互
reset动态面板的作用,是用于恢复输入框和button面板默认状态的,所以我们对其添加了点击动作。设置如图所示:
全部完成后,按F5进行演示即可。
https://pan.baidu.com/s/1DlLApPUQMvQhaE89gvOJvA
如有问题,欢迎大家留言!
标签: 广告
相关文章
AI 前线导读:FreeWheel 创建于 2007 年,总部位于美国硅谷,作为一家提供互联网视频广告投放、监测、预测、增值等解决方案的 IT 公司,其已为 CBS、Warner Brothers、Turner、Discovery 等公司提供服务...
2019-01-08 113
不要想着一次性把用户教会,需要做到的是在用户需要你的时候出现。用户不缺帮助,缺的是适时的引导。一个好的产品或好的功能,必定是让用户在使用的过程中逐步学会使用并形成依赖。一、前言引导用户使...
2019-01-08 22
过去的2018年里,iPhone 的产品线变得混乱,自动驾驶汽车变得无聊,美军从微软采购的 Hololens 也没有发生真正飞跃性的改变,而 Oculus Go 也只是将连着电脑的数据线彻底给切断了。我们距离想象中的未来...
2019-01-08 82
互联网行业风口不断,短视频、知识付费、人工智能等风口已经成为产品经理的共识,产品人才也变得更加炙手可热。不管在过去,还是在未来,谁能招聘到更多优质的产品人才,谁就能在剧烈的行业竞争中获得优势...
2019-01-08 43
发表评论