5.6　单击按钮控制数字增减效果

案例描述

单击+按钮，文本框中的数字加1；单击-按钮，文本框中的数字减1，如图5-50所示。

思路分析

• ▷　单击+按钮时，设置鼠标单击事件，并设置文本的number值+1。
• ▷　单击-按钮时，设置鼠标单击事件，并设置文本的number值-1。

操作步骤

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

（2）在“元件库”面板中将“文本框”元件拖入编辑区合适的位置，在工具栏中设置“宽度”为135，“高度”为45，在右侧“检视：文本框”区域设置名称为number，双击文本框，设置默认值为0，单击工具栏中的“水平居中”按钮，或按Shift+Ctrl+C组合键，将数字水平居中，如图5-51所示。

（3）在“元件库”面板中，将“提交按钮”拖入编辑区中的文本框左侧，设置宽度和高度分别为50、45，双击提交按钮，输入-号，在工具栏中设置字体大小为18，在“检视：提交按钮”区域设置按钮名称为minus；用同样的方法制作+号按钮，并设置名称为plus，如图5-52所示。

（4）在编辑区中选择-按钮元件，在右侧“属性”面板中双击“添加用例”下方的“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“元件”下方的“设置文本”选项，在右侧“配置动作”区域选中“number（文本框）”复选框，如图5-53所示。

（5）在“设置文本为”区域单击fx按钮，弹出“编辑文本”对话框，单击上面的“插入变量或函数”超链接，在弹出的下拉列表中选择max(x,y)选项，选中编辑区中的x,y，单击“插入变量或函数”超链接，在弹出的下拉列表中选择Target选项，然后补充括号中的相关信息，如图5-54所示，单击“确定”按钮，返回到“用例编辑<鼠标单击时>”对话框，单击“确定”按钮。

（6）在编辑区选择+按钮元件，在右侧“属性”面板中双击“添加用例”下方的“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“元件”下方的“设置文本”选项，在右侧“配置动作”区域选中“number（文本框）”复选框，在“设置文本为”区域单击fx按钮，弹出“编辑文本”对话框，单击上面的“插入变量或函数”超链接，在弹出的下拉列表中选择Target选项，然后补充大括号中的相关信息，如图5-55所示，单击“确定”按钮返回至“用例编辑<鼠标单击时>”对话框，单击“确定”按钮返回至编辑区中。

（7）按Ctrl+S快捷键，以“5.6”为名称保存该文件，然后按F5键预览效果，如图5-56所示。