- Axure RP 8.0中文版原型设计从入门到精通
- 张志科
- 793字
- 2021-03-31 06:23:57
4.4 重置文本框信息
案例描述
在文本框中输入“用户名”“密码”“确认密码”后,单击“重置”按钮,清空输入的信息,如图4-29所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P63_5934.jpg?sign=1739492513-kLSVHCO52pQltbD45I5wrDqzAZoYyoP5-0-709e8b54882694f68ef1a7ef755ca3a3)
图4-29 重置文本框信息
思路分析
- ▷ 为“文本框”元件设置文本类型和提示文字。
- ▷ 为“按钮”元件添加“鼠标单击时”事件,清空“用户名”“密码”“确认密码”文本框的内容。
操作步骤
(1)按Ctrl+N快捷键,新建一个Axure的文档。
(2)将“元件库”面板中的“文本标签”元件拖入编辑区中,双击使其呈编辑状态,清空文本内容并重新输入“用户名”,在工具栏中设置x为110,y为90,如图4-30所示。
(3)将“元件库”面板中的“文本框”元件拖入编辑区中,在工具栏中设置x为177,y为87,“宽度”为182,“高度”为25,在右侧“检视:文本框”区域设置名称为user_txt,在“属性”面板中的“文本框”区域设置“提示文字”为“请输入用户名”,如图4-31所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P64_5959.jpg?sign=1739492513-enwXQvb7W5dZpevEZ2VEebgzTjrtaHAd-0-9b4114c573e903c4d663f3988d432793)
图4-30 设置文本标签
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P64_5968.jpg?sign=1739492513-PhGuNKVbLp026A905qVC7d6xY7W4GKBD-0-9c7f05f6f1d1afa78cfee50da1270f6a)
图4-31 设置文本框
(4)在编辑区中的空白处单击鼠标,按Ctrl+A快捷键全选编辑区中的元件,按住Shift+Ctrl快捷键的同时向下拖动鼠标,复制两次,并修改其内容和提示文字,如图4-32所示。
(5)在右侧“检视:文本框”区域分别修改其名称为password_txt、confirm_txt。在“属性”面板中设置“类型”为“密码”,如图4-33所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P64_5979.jpg?sign=1739492513-pyFmJ61ROQPldr9i8GrWM3wR6LFZ3tPY-0-5080681c2d37771d20e325de30b736f3)
图4-32 复制元件并修改内容
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P64_5987.jpg?sign=1739492513-cvj97CFBEPZD9ze3q51TryLV0LQrQqw5-0-0a861e111040e48d3d8a8cefcab28a82)
图4-33 设置“类型”为“密码”
(6)将“元件库”面板中的“主要按钮”元件拖入编辑区中,双击并重新输入“重置”,在工具栏中设置x为280,y为215,“宽度”为80,“高度”为30,在右侧“检视:矩形”区域设置名称为reset,如图4-34所示。
(7)在右侧“属性”面板中双击“鼠标单击时”选项,弹出“用例编辑<鼠标单击时>”对话框,在左侧“添加动作”区域选择“设置文本”选项,在右侧“配置动作”区域选中“user_txt(文本框)”“password_txt(文本框)”“confirm_txt(文本框)”复选框,如图4-35所示。单击“确定”按钮返回至编辑区中。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P65_6005.jpg?sign=1739492513-6mHntq9J9aG8och1gXHoMqccUDdkVNCc-0-93fbe7febb698cbe074c0f83cbf6e6f1)
图4-34 拖入“主要按钮”元件
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P65_6015.jpg?sign=1739492513-Y6WUGcnF6ljXRHvLGA6DFWRKSgaG85WE-0-d5039d2dd38bec1448b9c178c764816b)
图4-35 添加动作
(8)按Ctrl+S快捷键,以“4.4”为名称保存该文件,然后按F5键预览效果,如图4-36所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P65_6019.jpg?sign=1739492513-EWHFVv0UOwT2ifTMDtDU7wvSYRDth9Ag-0-7cac1310811fe924a349b415000a65a4)
图4-36 最终效果