根据第一个下拉列表的选项,第二个下拉列表显示不同的选项。
STEP0:下载练习文件
如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。
STEP1:开始
(注意:虽然在Axure RP中无法动态设置下拉列表中的选项,但是可以是用动态面板和下拉列表元件来模拟这种行为。)
在练习文件中打开“动态设置下拉列表”页面以便在画布中进行编辑。
页面上的表单用于给员工选择一个新的工作岗位,不同的部门有不同的工作岗位,基于第一个下拉列表的选择,第二个下拉列表会有不同的选项。
首先,该页面包含一个“部门”下拉列表,下拉列表中有三个选项:运营部、销售部、开发部,每一个选项都对应一个下级下拉列表,每个下级下拉列表都有两个选项,即该部门的岗位名称。
STEP2:创建动态面板
右键点击第一个“岗位”下拉列表(显示“行政助理”选项的那个),然后点击“转为动态面板”。
在检视窗口顶部的文本框中,设置该动态面板的名称为“岗位”。
在属性页签下,点击“自动调整为内容尺寸”的复选框。
双击这个动态面板打开动态面板状态管理器。
点击两次绿色的“+”图标添加两个新的状态(总共三个状态)。
在每个状态名称上缓慢的双击来修改状态名称,三个状态的名称以此修改为“运营部”、“销售部”、“开发部”。
最后,将“销售部”和“开发部”连个下拉列表分别剪切/粘贴到对应的动态面板状态中,确保位置坐标位(0,0)。
STEP3:根据第一个下拉列表的选项切换动态面板状态
回到“动态设置下拉列表”页面,单击“部门”下拉列表元件,在属性页签下,双击“选项改变时”来创建一个新的选项改变时用例。
在左侧“添加动作”栏,点击“设置面板状态”动作。
在右侧“配置动作”栏,选择“岗位”动态面板。
在这一栏的底部,找到“选择状态”下拉列表,并设置它的选项为“Value”。
点击文本框后面的“fx”按钮。
在“局部变量”区域点击“添加局部变量”,然后修改第一个下拉列表的选项为“被选项”。
在后面的下拉菜单中选择“当前元件”(会显示为This)。
在该对话框的顶部文本框中,删除自动带出的数字“1”,然后点击“插入变量或函数”。
在“局部变量”下,点击“LVAR1”。
点击“确定”按钮关闭编辑值窗口,然后再次点击“确定”按钮关闭用例编辑器。
STEP4:预览
点击预览。
尝试点击第一个下拉列表中的选项,根据不同选项,观察各种动态面板状态下的不同下拉列表。