Axure RP官方教程翻译(7):弹出菜单和自主工具提示

弹出菜单是菜单的一种类别,当鼠标指针移开菜单时它可以自动隐藏。

同样的技术可以使用在建立一个弹出菜单,这会在下面解释到,也可以用来创建一个自主工具提示。(创建一个简单的文本提示那就更简单了,直接使用右侧的属性标签栏下的“提示”区域。)

实现的效果如下:

Axure RP官方教程翻译(7):弹出菜单和自主工具提示 Axure RP官方教程翻译(7):弹出菜单和自主工具提示

STEP 0:下载培训文档

如果你还没有培训文档,请点击下载 AxureTraining.rp 文档。这个文档包含了Axure培训网站上每个教程用到的相关页面。我们建议你一直都用我们准备的这个文档来完成教程,但是如果你不用,那也是可以的——即使你没有使用我们的培训文档,我们也总是会告诉你为了完成每一个教程新文件里都创建了什么。

AxureTraining.rp文档打开后,选择本次练习页面后如下:

Axure RP官方教程翻译(7):弹出菜单和自主工具提示

Axure RP官方教程翻译(7):弹出菜单和自主工具提示

STEP 1:设置

  • 打开培训文档中的“Flyout menu”页面。这个页面包含了四个按钮组成的菜单,以及其中一个主菜单包含两个字菜单按钮。
  • 通过选择两个子菜单然后点击工具栏的“组”给两个子菜单添加一个组。
  • 将组命名为“Flyout”。
  • 点击右侧样式标签下的复选框“隐藏”来隐藏这个组。

Axure RP官方教程翻译(7):弹出菜单和自主工具提示

STEP 2:添加一个交互行为来显示弹出菜单

  • 选择“Help”组件(就是有两个子菜单的那个)。
  • 双击属性标签栏中的“鼠标进入”来创建一个新的鼠标进入实例。(对于自主工具提示,你也许会希望使用“鼠标悬停”事件来代替。鼠标悬停事件只有鼠标指针停在组件上方两秒才会生效。要找到鼠标悬停,在“更多事件”下拉框找。)
  • 在对话框左边栏,点击行为“显示”。
  • 在对话框右边栏,点击组“Flyout”。
  • 在右边栏底部,使用“更多选项”下拉框选择“作为弹出菜单”
  • 点击确定关闭对话框。

Axure RP官方教程翻译(7):弹出菜单和自主工具提示

Axure RP官方教程翻译(7):弹出菜单和自主工具提示

 

 

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

发表评论

登录后才能评论

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

QR code