Axure RP官方教程翻译(6):灯箱效果

我们知道当一个包含信息、图片或者是视频的灯箱显示时,灯箱以外的界面就会变得昏暗。当点击昏暗的部分就可以关闭灯箱恢复到之前的页面状态。本篇教程实现的效果如下:

Axure RP官方教程翻译(6):灯箱效果

 STEP 0:下载培训文档

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

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

Axure RP官方教程翻译(6):灯箱效果

STEP 1:开始

打开培训文档中的“Lightbox”页面

这个页面包含了一个按钮和一个带有一张地图的动态面板。

通过选择动态面板,点击样式标签下的复选框“隐藏”来隐藏动态面板。

Axure RP官方教程翻译(6):灯箱效果

STEP 2:创建灯箱交互

  • 选择按钮“view on map”然后双击右侧面板属性标签栏的“OnClick”来添加一个OnClick实例。
  • 在弹窗的左边栏,点击行为“显示”。
  • 在右边栏点击Map lightbox动态面板。
  • 在右边栏的底部,使用“更多选项”的下拉框选择“以灯箱对待”。
  • 一个标记为“背景颜色”的取色器出现。这个取色器是用来设置当灯箱元素显现时,在界面的其余部分上方覆盖的一层颜色遮盖层。它的默认颜色是 \#2f4f4f(一个暗灰色),透明度为61%。
  • 这里采用默认值,点击确定关闭对话框。这时你可能想预览一下确认灯箱它是否能工作。

Axure RP官方教程翻译(6):灯箱效果

STEP 3:将灯箱固定在窗口的中央

有时灯箱被固定在窗口的中央,这样即使你滚动页面它总是可以出现在同一个地方。继续下面的步骤来学习如何创建这个效果。

Axure RP官方教程翻译(6):灯箱效果

  • 选择动态面板,在右侧面板的属性标签下,点击“固定到浏览器”。
  • 在对话框“固定到浏览器”里,勾选复选框“固定到浏览器窗口”。
  • 在“水平固定”部分选择“中央”,在“垂直固定”部分选择“居中”。
  • 点击“确定”关闭对话框。

STEP 4:预览

点击预览。

点击按钮“view on map”查看灯箱效果。点击灯箱外的任意地方来关闭它。我们在动态面板的右上角也做了一个关闭的按钮来隐藏动态面板,点击它也可以关闭灯箱。

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

发表评论

登录后才能评论

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

联系我们

 

QR code