• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > 建立自己的元件库(二)——验证码

建立自己的元件库(二)——验证码

作者: @ningmengsuan 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含pads建立元件库,orcad建立元件库,如何建立元件库,元件库的建立,ad建立元件库等相关知识, @ningmengsuan 希望在学习及工作中可以帮助到您

笔者工作中会经常用到Axure,所以这篇文章距离上篇的时间间隔不会很长,而且以后也会持续更新,也希望有更快捷、简便方法的朋友可以多提意见。

zujianyuanjianku

上篇文章:建立自己的元件库(一)——轮播图

实际上我们日常常用的元件往往都不是多难做的,但是若存下来却会省下很多时间。今天笔者写的就是一个比较简单的元件——验证码。

功能描述:

点击“发送验证码”按钮,显示“60s后重发”,然后一直切换,直到变回“发送验证码”字样。

第一步:画出对应的组件

在这里我们需要一个矩形作为文本框的外框、一个文本框、一个动态面板存放文字、一个“发送验证码”的按钮。

1.画一个矩形作为文本框的外边框,圆角半径设为8。大家都知道,Axure提供的文本框的外边框并不这么美观,为了好看我们可以自己画一个,如下图。

0

2.画一个文本框,隐藏外边框,在“提示文字”中输入“请输入验证码”,如下图。

1

3.拖进一个动态面板,名称“文字”,建立2个状态,名称分别为“发送”、“倒计时”,用来存放2个文字状态,如下图。

4.1

注意,状态“倒计时”中的“60”是一个单独的lable,名称为“time”。(这里我为了看起来清晰,文本颜色设为黑色,后面改成了白色)

4.再拖进一个动态面板,名称为“计时器”,建立2个状态。这个动态面板使用来计时来改变秒数文字的。

5.画一个按钮,名称为“按钮”。

1)圆角半径设为8,注意这个值是要与刚刚的矩形圆角半径设为一样的;

2)然后选择左半边为直角,右半边为圆角即可,如下图。

2

3)为“按钮”矩形设置禁用样式,如下图。

5

6

4)选择“文字”面板和“按钮”矩形,组合,这不操作是为了方便后面添加点击事件。

4.最后,调整位置,如下图。

4

第二步:为按钮添加事件——“鼠标单击时”

此步骤要实现点击按钮后,改变文字,文字由“发送验证码”变为“60s后重新发送”,且按钮在这60s中不可点击。

1.设置按钮为禁用状态,如下图。

7

2.切换“文字”动态面板状态,如下图。

9

3.设置“计时器”面板的状态循环,如下图。

10

第三步:改变“计时器”面板状态来计时

此步骤要实现倒计时功能以及60s之后,按钮变回“发送验证码”。此时需要分为倒计时过程中和倒计时结束2种情况。

1.为“计时器”面板添加事件——状态改变时,添加全局变量“time”,设置默认值为60,如下图。

11

2.为事件添加条件,当time>0时,即倒计时进行中要做什么——设置“time”Lable文字从60-0开始倒数。

1)添加条件,变量值“time”大于0。

13

2)设置time值等于[[time-1]],如下图。

12

3)设置“time”文本等于变量值“time”,如下图。

14

3.在“状态改变时”中新建case2,此步骤实现time<0,即倒计时结束后要做什么,如下图。

1)设置启用“btn”矩形,如下图。

15

2)设置“文字”面板状态为“发送”,如下图。

16

OK,大功告成,赶紧运行看看吧!

您可能想查找下面的文章:

  • 建立自己的元件库(二)——验证码

相关文章

  • 2017-06-13Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数…全面实战应用)
  • 2017-06-14如何优雅的用Axure装逼?高保真原型心得分享
  • 2017-06-14Axure8.0小案例:电动机原型
  • 2017-06-14Axure7.0教程(六)math函数的使用(1)动态面板环状移动
  • 2017-06-14Axure教程:用Axure实现晚会抽奖程序
  • 2017-06-13Axure教程:如何使用Axure中继器元件?
  • 2017-06-14Axure教程 - 为原型设计添加点动画效果
  • 2017-06-13Axure教程:原型设计之弹幕
  • 2017-06-14Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
  • 2017-06-13Axure教程:移动端原型如何适配不同分辨率的手机?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程|原型设计之抽屉列表
    • Axure中继器:制作可交互的“APP音乐播放列表页”
    • Axure教程 | 原型中的商品图放大镜效果
    • 五分钟教你快速上手Axure交互设计
    • Axure原型技巧 | 这回我们模拟下键盘输入
    • Axure实例:顶栏和侧边栏的固定和窗口自适应
    • axure实现坦克游戏原型
    • Axure原型设计之轮播图
    • Axure7.0实现动态“极验”效果(滑动验证)
    • axure九宫格拼图的实现原理

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有