案例2.   文本框：边框变色

案例来源:

百度-登录界面

案例效果：

光标进入文本框时：(图1-6)

案例描述：

在登录界面中，包含用户名与密码的输入框。当焦点进入输入框时，输入框边框与内部图标变为蓝色；失去焦点时，恢复灰色。

元件准备：

页面中：(图1-7)

包含命名：

矩形(用于账号输入边框)：Border01

矩形(用于密码输入边框)：Border02

思路分析：

输入框的样式在两种不同状态下切换，可以通过交互样式来实现；(操作步骤1)

文本框获取焦点时，呈现选中的样式(操作步骤2~3)；

文本框失去焦点时，呈现未选中的样式(操作步骤4~5)。

操作步骤：

1、设置元件“Border01”与“Border02”的选中时交互样式为淡蓝色边框与文字；(参考“基础23”)

2、设置账号输入文本框【获取焦点时】，【选中】元件“Border01”；

事件交互设置：(图1-8)

用例动作设置：(图1-9)

3、参考上一步，设置密码输入文本框【获取焦点时】，【选中】元件“Border02”；

4、设置账号输入文本框【失去焦点时】，【取消选中】元件“Border01”；

事件交互设置：(图1-10)

用例动作设置：(图1-11)

5、参考上一步，设置密码输入文本框【失去焦点时】，【取消选中】元件“Border02”。

补充说明：

本案例中的“输入框”是指矩形边框与文本框共同组成的一组内容，而非文本框元件。

本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。(参考案例1的补充说明)

特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。

~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程，以独有的教学方法与技巧，帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】

喜欢 (52)or分享 (0)