3.3　找回密码

案例描述

找回密码分为3个步骤，首先输入用户名和验证码，单击“下一步”按钮，进入重置密码页面（见图3-24），然后输入重置密码，单击“下一步”按钮进入密码重置成功页面，最后提示密码重置成功。

思路分析

• ▷　为“按钮”元件添加“鼠标单击时”事件。
• ▷　设置动态面板状态。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在左侧“元件库”面板中将“动态面板”元件拖入编辑区中，在工具栏中设置x和y均为45，“宽度”为390，“高度”为60，在右侧“检视：动态面板”区域设置名称为number，如图3-25所示。

（3）双击“动态面板”元件，弹出“面板状态管理”对话框，在“面板状态”选项组中单击两次“添加”按钮，添加两个面板状态，如图3-26所示。

（4）双击State1面板状态，进入number/State1（index）编辑区，在左侧“元件库”面板中将“椭圆形”元件拖入编辑区中，在工具栏中设置“x轴坐标”和“y轴坐标”分别为0和16，“宽度”和“高度”均为30，“填充颜色”为橙色（#FF6600），“线段颜色”为无，“文本颜色”为白色，如图3-27所示。

（5）在左侧“元件库”面板中将“水平线”元件拖入编辑区中，在工具栏中设置x和y均为31，“宽度”为150，“线段颜色”为灰色（#D7D7D7），“线宽”为第2个选项，如图3-28所示。

（6）复制“椭圆形”元件和“水平线”元件，并修改其颜色和内容，如图3-29所示。

（7）在编辑区中按Ctrl+A快捷键全选元件，并按Ctrl+C快捷键复制元件，然后单击index标签切换至index编辑区中，双击“动态面板”元件，在弹出的“面板状态管理”对话框中双击State2选项，进入number/State2（index）编辑区，按Ctrl+V快捷键粘贴复制的元件，修改其“填充颜色”和“线段颜色”，如图3-30所示。

（8）用同样的方式复制/粘贴元件到number/State3（index）编辑区，并修改“填充颜色”和“线段颜色”，效果如图3-31所示。

（9）单击index标签进入index编辑区中，在左侧“元件库”面板中将“动态面板”元件拖入编辑区中，在工具栏中设置x和y分别为45和115，“宽度”为390，“高度”为135，在右侧“检视：动态面板”区域设置名称为content，如图3-32所示。

（10）双击“动态面板”元件，在弹出的“面板状态管理”对话框中单击两次“添加”按钮添加两个面板状态，并设置其名称分别为“输入用户名”“重置密码”“完成”，如图3-33所示。

（11）双击“输入用户名”面板状态，进入“content/输入用户名（index）”编辑区，在左侧“元件库”面板中将“文本标签”和“文本框”元件分别拖入编辑区中适当的位置，并调整大小，在右侧“检视：文本框”区域设置名称为userName，如图3-34所示。

（12）在左侧“元件库”面板中将“主要按钮”元件拖入编辑区中适当的位置，双击输入“下一步”，在工具栏中设置x和y分别为148和75，“宽度”为79，“高度”为30，“文本颜色”为白色，“填充颜色”为橙色（#FF6600），如图3-35所示。

（13）单击index标签进入index编辑区，双击“动态面板”元件，在弹出的“面板状态管理”对话框中双击“重置密码”面板状态，进入“content/重置密码（index）”编辑区，在左侧“元件库”面板中将“文本标签”“文本框”“主要按钮”元件分别拖入编辑区中适当的位置，并设置“文本框”元件的名称为setPwd，如图3-36所示。

（14）单击index标签进入index编辑区，双击“动态面板”元件，在弹出的“面板状态管理”对话框中双击“完成”面板状态，进入“content/完成（index）”编辑区，在左侧“元件库”面板中将“文本标签”元件拖入编辑区中适当的位置，在工具栏中设置“字体尺寸”为16，“字体颜色”为橙色（#FF6600），如图3-37所示。

（15）单击index标签进入index编辑区中，双击“content动态面板”元件，在弹出的“面板状态管理”对话框中双击“输入用户名”面板状态，进入“content/输入用户名（index）”编辑区，选择“按钮”元件，在右侧“属性”面板中选择“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“设置面板状态”选项，在右侧“配置动作”区域选中“number（动态面板）”复选框，设置“选择状态”为State2，如图3-38所示。

（16）在右侧“配置动作”区域选中“content（动态面板）”复选框，设置“选择状态”为“重置密码”，如图3-39所示。单击“确定”按钮返回至“content/完成（index）”编辑区中。

（17）用同样的方法为“重置密码”面板状态添加动作，如图3-40所示。单击“确定”按钮返回至“content/完成（index）”编辑区中。

（18）单击index标签返回至index编辑区中，按Ctrl+S快捷键，以“3.3”为名称保存该文件，然后按F5键预览效果，如图3-41所示。