跨页面设置动态面板状态 | Set Dynamic panel State on Next Page

根据上个页面的选项来设置动态面板的状态。

STEP 0:下载练习文件

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

STEP 1:设置

在练习文件中打开“跨页面设置动态面板状态”页面,在画布中有四个单选按钮元件和一个提交按钮元件,这四个单选按钮已经被添加到了同一个单选按钮组合中,以便一个被选中的时候,其他的可以自动取消选择。

STEP 2:当单选按钮被选中时给全局变量赋值

选中其中一个单选按钮,在检视窗口的属性页签下,双击“选中时”来添加一个新的选中时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“设置变量值”动作,然后在右侧“配置动作”栏中选择全局变量“FlowerVar”。

在右侧“添加动作”栏的底部,分别设置第一个下拉列表和第二个下拉列表的选项为“元件文字”和“This”(当前元件)。 这样可以使得全局变量“FlowerVar”的值等于单圈按钮的标签文本。

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

“This”(当前元件)是指触发事件的元件,因此这个完全相同的“选中时”用例可以用在全部四个单选按钮元件上,我们不需要为每一个元件重新设置用例,只需要复制粘贴就可以。

回到检视窗口的属性页签下,右键点击“Case1”并在弹出的右键菜单中选择“复制”,然后右键点击另外一个单选按钮元件并选择“粘贴”,这样就可以使复制的用例直接粘贴到目标元件的“选中时”事件下。

再将复制的用例粘贴到另外两个单选按钮元件上,以保证这四个元件都具有相同的“选中时”用例。

STEP 3:利用按钮打开下一页的链接

选中“提交按钮”矩形元件,在检视窗口中的属性页签下,双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“打开链接”,在右侧“配置动作”栏下,选择名为“鲜花面板页面”的页面。

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

STEP 4:将动态面板状态设置为变量值

现在打开名为“鲜花面板页面”的页面,在画布上有一个动态面板,并且包含了四个状态,值得注意的是,状态的名称和单选按钮元件上的文本完全一样。

选择“鲜花面板”动态面板,然后在检视窗口中的属性页签下,双击“载入时”来添加一个新的载入时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“设置面板状态”,然后在右侧“配置动作”栏中选择“当前元件”。

在右侧“配置动作”栏的底部,设置“选择状态”的选项为“value”,然后点击“状态名称或序号”字段右侧的“fx”图标,来打开编辑值对话框。

删除顶部输入框中的“1”,然后点击“插入变量或函数…”,在弹出的下拉列表中选择全局变量下的“FlowerVar”,然后就会发现输入框中出现了“[[FlowerVar]]”。

这样就可以将“鲜花面板”动态面板的状态设置为名称和全局变量“FlowerVar”的值相同的状态,两者必须完全匹配才能使这种交互生效,这就是为什么存储在全局变量中的单选按钮标签要与动态面板的状态名称完全一致。

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

STEP 5:预览

回到“跨页设置动态面板状态”页面然后进行预览,在Web浏览器中,选择其中一个单选按钮,然后点击“提交”按钮,当“鲜花面板页面”载入时,“鲜花面板”动态面板将会显示与你所选单选按钮对应的鲜花。

评论(0 个评论)

发表回复

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