Axure RP官方教程翻译(13):动态设置下拉选项

根据第一个下拉选项的不同,第二个下拉选项框会相应变化,效果如下:

Axure RP官方教程翻译(13):动态设置下拉选项

STEP 1:开始

  • 打开培训文档中的“Dynamic Droplist”页面。
  • 页面中的表单是用来为雇员选择职位的。不同的部门拥有不同的职位头衔,基于这个第一个列表的选择,第二个下拉列表可获得不同的选项。
  • 首先,这个页面包含一个“Department”下拉列表带有三个选项:“Operations”,“Sales”,“Development”。每个选项都对应有一个子下拉列表。每个子下拉列表有两个选项。都是那个部门下的职位头衔。

Axure RP官方教程翻译(13):动态设置下拉选项

STEP 2:创建动态面板

  • 右键单击第一个“Job Title”下拉列表,就是选项里写着“Administrative Assistant”,然后点击“转化为动态面板”。
  • 在右边审查面板的顶部这个区域,将动态面板命名为“Job title”。
  • 在属性标签栏下,点击复选框“内容适应”。
  • 双击动态面板进入动态面板状态管理器。
  • 点击绿色“+”号两次,现在动态面板共有三种状态。
  • 轻轻双击每一个状态,并将它们按顺序重命名为:“Operations”,“Sales”,“Development”。
  • 最后,将“Sales”和“Development”的下拉列表从主页面剪切/粘贴它们各自对应的动态面板的状态页中,设置坐标为(0,0)。

Axure RP官方教程翻译(13):动态设置下拉选项

STEP 3:基于第一个下拉选框的选择设置动态面板的状态

  • 回到“Dynamic Droplist”页面。单击“Department”下拉组件。在属性标签栏中,双击“当选项改变”添加一个新的选项改变实例。
  • 在左边栏,点击行为“设置面板状态”。
  • 在右边栏,点击“Job title”动态面板。
  • 在右边栏底部,找到“选择状态”下拉选项然后点击“值”。
  • 点击临近入口区域的“fx”按钮。
  • 在下面的“本地变量”部分,修改第一个下拉选项为“选中的选项”。
  • 在下一个下拉选项,选择“这个组件”。
  • 在对话框的顶部区域,删除自动插入的数字1,点击“插入变量或者功能”。
  • 在出现的下拉选项里找到“本地变量”,点击“LVAR1”。
  • 点击确定关闭”编辑值”对话框,再次点击确定关闭实例编辑器对话框。

Axure RP官方教程翻译(13):动态设置下拉选项

STEP 4:预览

点击预览。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

QR code