码迷,mamicode.com
首页 > 其他好文 > 详细

axure切换焦点文本框样式

时间:2017-04-28 15:50:56      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:axure   文本框   高保真   

在之前的文章中,我们介绍过在axure中自定义文本框样式的方法,今天我们再深入一些,当文本框的焦点发生变化时,动态切换焦点文本框的样式。

先看效果:

技术分享

制作步骤:

先把文本框的默认样式做出来:

  1. 拖入两个文本框,分别命名为用户名、密码,隐藏边框,设置好提示文字;、

  2. 拖入两个矩形,设置高度略大于文本框,边框颜色为浅灰色,分别命名为用户名边框、密码边框,分别把两个文本框置于对应的边框上方。

技术分享

技术分享

开始做交互,当文本框获取焦点时,改变边框颜色:

  1. 当文本框获取焦点时,把对应的边框矩形设置为选中状态,失去焦点时,取消对应的边框矩形的选中状态。用例如下:

    技术分享

  2. 设置两个边框矩形的“选中”样式:线段颜色为橙色;

    技术分享

  3. 当页面载入时,焦点应该自动设置在用户名文本框中,所以在页面载入时添加用例如下:

    技术分享

    需要说明的是,这个自动获取焦点动作在chrome浏览器中可能没有效果,使用IE内核的浏览器如(搜狗浏览器)是可以的;

  4. 其中“设置选中状态于 用户名边框="true"”这个动作必须要加上,否则没有效果。

OK,大功告成~~

技术分享

技术分享


本文出自 “产品经理_狄睿鑫” 博客,请务必保留此出处http://pmdrx.blog.51cto.com/11810835/1920411

axure切换焦点文本框样式

标签:axure   文本框   高保真   

原文地址:http://pmdrx.blog.51cto.com/11810835/1920411

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!