创建一个包含条款和条件的协议表单,要求用户选中复选框并输入其姓名。
STEP 0:下载练习文件
如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。
STEP 1:禁用文本框和按钮
在练习文件中打开“条款和条件”页面,在画布上有一个简单包含条款和条件的协议表单。
选中表单底部的“签名”文本框,在检视窗口属性页签下,向下滚动到“禁用”复选框处并选择“禁用”,或者你也可以在文本框上点击右键,然后选择“禁用”。文本框被禁用后,就不能在Web浏览器中进行交互。
同样对“继续按钮”矩形元件重复此操作以将其禁用,不过要注意的是,在Web浏览器中,这也会激活矩形元件的“禁用”交互样式。
STEP 2:当复选框被选中时启用文本框
选中“同意”复选框元件,在检视窗口属中的属性页签下,双击“选中时”来添加一个新的选中时用例。
在用例编辑器中,点击左侧“添加动作”栏中的“启用”(位于“启用/禁用”下面),然后在右侧“配置动作”栏中选择“签名”文本框元件。
再回到左侧“添加动作”栏,点击“获取焦点”,在右侧“配置动作”栏中再次选择“签名”文本框元件。
当在Web浏览器中选中了“同意”复选框时,这两个动作可以启用文本框以便可以输入文本,并且将光标自动移到文本框中。
点击“确定”按钮关闭用例编辑器。
STEP 3:当复选框取消选中时禁用并清空文本框
在“同意”复选框被选中的状态下,双击检视窗口中属性页签下的“取消选中时”来添加一个新的取消选中时用例。
在用例编辑器中,点击左侧“添加动作”栏中的“禁用”(位于“启用/禁用”下面),然后在右侧“配置动作”栏中选择“签名”文本框。
在回到左侧“添加动作”栏中,点击“设置文本”,然后在右侧“配置动作”栏中再次选择“签名”文本框,在这一栏的底部,保持“设置文本为:”的“值”为空。
当复选框被取消选中时,这两个动作就可以禁用文本框并且清空文本框中已经输入的内容。
点击“确定”按钮关闭用例编辑器。
STEP 4:当文本框不为空时启用按钮
选中“签名”文本框元件,在检视窗口中的属性页签下,双击“文本改变时”来添加一个新的文本改变时用例。
在用例编辑器的顶部,点击“添加条件”按钮来打开条件设立对话框。
修改第三个下拉列表的选项为“!=”,其他字段保持默认状态,当“签名”文本框不为空的时候这个条件就会生效,也就是当用户在Web浏览器中输入文本时。
点击“确定”按钮管理条件设立对话框。
在用例编辑器中,点击左侧“添加动作”栏中的“启用”(位于“启用/禁用”下面),然后在右侧“配置动作”栏中选择“继续按钮”矩形元件。
点击“确定”按钮关闭用例编辑器。
STEP 5:当文本框为空时禁用按钮
在“签名”文本框被选中的状态下,双加检视窗口中属性页签下的“文本改变时”来添加第二个文本改变时用例。
在用例编辑器中,点击左侧“添加动作”栏中的“禁用”(位于“启用/禁用”下面),然后在右侧“配置动作”栏中选择“继续按钮”矩形元件。
点击“确定”按钮关闭用例编辑器。
请注意,即使我们没有给这个用例设置条件,但是它仍然显示一个“Else If True”的条件,当第一个用例没有发生时就会触发此用例。也就是在Web浏览器中,当“签名”文本框再次为空的时候,将会触发此用例,如果用户手动清空了文本框中的文本,或者取消选中“同意”复选框,该用例就会被触发。
STEP 6:预览
在Web浏览器中预览页面,选中复选框以启用文本框,在文本框中输入一些内容以启用按钮,然后取消选中复选框以禁用文本框和按钮。