AxureRP8实战手册-案例2（文本框：边框变色）
案例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原创教程网 » AxureRP8实战手册-案例2（文本框：边框变色）
