将文本传到下一页 | Pass Text to Next Page

在文本字段中输入文本,利用全局变量将文本传递给其他页面。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:设置

在练习文件中打开“将文本传到下一页”页面。

该页面包含三个文本字段:“名字”、“姓”、“电子邮件”,另外还有一个提交按钮,这个提交按钮会把在文本字段中输入的文本传到名为“下一页”的页面中。

STEP2:创建全局变量

在Axure RP原型中,将信息从一个页面传到另一个页面,需要使用全局变量。在这个文件中,我们需要设置三个全局变量:FirstNameVar,LastNameVar,EmailAddressVar。在顶部菜单栏中,点击“项目>全局变量”来创建。

默认情况下,一个原型文件中会包含一个名为OnLoadVariable的全局变量,点击全局变量OnLoadVariable来修改它的名称,输入“FirstNameVar”。

点击绿色的“+”图标,添加一个新变量,命名为“LastNameVar”。

再点击绿色的“+”图标,添加最后一个变量,命名为“EmailAddressVar”。

注意:如果你下载了Axure Training.rp文件,上面说到的这些变量已经创建好了,因为我正在制作这个教程的完成版。只要你你需要的变量在,进行下一步就可以了。

STEP3:创建交互来给变量赋值并打开下一页

单击选中“下一页”按钮。

在属性页签下,双击“鼠标单击时”来创建一个新的鼠标单击时用例。

在左侧“添加动作”栏,点击“设置变量值”。

在右侧“配置动作”栏,选择“FirstNameVar”。

在这一栏的底部的“设置变量值”区域,设置第一个下拉列表的选项为“元件文字”,然后设置第二个下拉列表的选项为“名字”文本框元件。

你不需要为另外两个变量单独添加“设置变量值”动作,你可以在一个动作下设置多个变量。在“配置动作”栏的顶部,选择“LastNameVar”。

在“设置变量值”区域,设置第一个下拉列表的选项为“元件文字”,然后设置第二个下拉列表的选项为“姓”。

回到“配置动作”栏的顶部,选择“EmailAddressVar”。

在“设置变量值”区域,设置第一个下拉列表的选项为“元件文字”,然后设置第二个下拉列表的选项为“电子邮件”。

在左侧“添加动作”栏,点击“打开链接”。

在右侧“配置动作”栏,点击页面列表中的“下一页”。

点击“确定”按钮关闭用例编辑器。

STEP4:在下一页设置确认文本

在“页面”窗格中,打开“下一页”,在该页面中包含一个带有部分完成的确认信息的段落元件。

在该页面的检视窗格下,双击“页面载入时”来添加一个新的页面载入时用例。

在左侧“添加动作”栏,点击“设置文本”。

在右侧“配置动作”栏,选择“确认信息”段落元件。

在这一栏的底部,点击“fx”按钮。

使用鼠标光标选中文本中的“名字”。

然后直接点击“插入变量和函数…”。

在下拉列表中选择“FirstNameVar”,改变量就会以[[FirstNameVar]]这样的形式插入,中括号表示这是一个变量。

使用光标选中“姓”。

点击“插入变量和函数…”,然后选择“LastNameVar”。

使用光标选中“email.address@website.com”。

点击“插入变量和函数…”,然后选择“EmailAddressVar”。

点击“确定”按钮关闭编辑文本对话框,然后再次点击“确定”按钮关闭用例编辑器。

STEP5:预览

点击预览。

尝试填写表单,然后打开下一页。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。