axure教程之五文本框焦点效果:[5]
1、拖动文本框到页面编辑区,并编辑里面的文字为:请输入用户名,然后设置颜色为灰色
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/506d92f1d8a7263304c84957c02c56ee7a7f44e0.jpg)
2、添加交互效果,点击右侧的onfocus(获取焦点时)
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/874f6275e5f4fcf5bb41be7a21d7726b0de2bde0.jpg)
3、在弹出的页面中 点击头部的添加条件,下拉框选择元件文字,值为:请输入用户名点击确定
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/0da37be7340f6478496f3a0dfd3e21c2bad6b5e0.jpg)
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/1562a0b9763e21c2da9a6564e6e89a618725b1e0.jpg)
4、在用例编辑器的左侧菜单中 元件/变量----》设置变量/元件值
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/6ca9846186254193a9a434b0df1bd10ff326abe0.jpg)
5、点击右侧的 打开设置值编辑器按钮
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/d04eec260d9a310e79d56d9e31b842406bfea2e0.jpg)
6、下拉框中选择焦点元件上的文字,值设置为空然后点击确定
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/c255efc595ee41c1c06b28e78d88912ca4ca9be0.jpg)
1、点击工具界面的onlostFocus(失去焦点时),然后在弹出界面点击添加条件
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/91091efc77f7980ede6cc7c5d4db3620b83a91e0.jpg)
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/b87bd38920c5260f0179593ed2de4507890189e0.jpg)
2、下拉框选择元件文字,点击确定
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/3931cb413a8ca60837431048db8c9bcec6f8fee0.jpg)
3、点击左侧的设置变量/元件值,然后在点击右侧的打开设置编辑器
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/8b3643dd884ce54ab46b635ba3066b0193ddf7e0.jpg)
4、下拉框选中焦点元件上的文字,值:请输入用户名,点击确定,然后生成原型界面网页,打开网页效果就出来啦
![axure教程之五文本框焦点效果:[5]](https://exp-picture.cdn.bcebos.com/b7b28f87031c99c00ab06532af2fa872951fede0.jpg)
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:184
阅读量:112
阅读量:72
阅读量:43
阅读量:62