×
关于

核心训练

准备开始页面操作部件库和 Masters建立交互引入动态面板条件、值和变量

从头开始

电子商务网站手机上展示的原型

原型设计基础指南

按钮的交互显示隐藏部件用户自定义 Tooltip导航菜单

Masters 指南

上一页/下一页链接 Master

动态面板指南

图片循环显示制作自定义的下拉菜单折叠控制选项板部件视频与图片的 Lightbox图像的拖拽交互拖拽地图自动旋转标题

高级原型设计指南

账户登录Auto-Tab 字段Terms 和 Conditions下拉列表选择必填字段设置文本下拉列表将文本传递给下一个页面在下一个页面上设置面板

Web 设计指南

嵌入视频和地图

iPhone App 指南

滑动菜单滚动内容屏幕过渡动画Swipping 幻灯片

Repeater 部件指南

Repeater 小部件

自适应视图指南

自适应视图

视频与图片的 Lightbox


关于 LIGHTBOX

在网站上用于显示大图或者播放视频的常用控件就是 Lightbox 了。一般地,lightbox 背景周围一般会变成灰色,有助于让人们的注意力集中在 lightbox 所显示的内容上。点击 lightbox 周边区域或者 close 按钮可以关闭 lightbox。

在 Axure RP 中,你能通过 treat as lightbox 设置背景变暗,再将其添加到 Show/Hide 动作上去。一个通过上诉方法实现的简单的图片视频 lightbox 示例可以下载 AxureWebsite.zip

lightbox 示例

图片 Lightbox

image

Lightboxes 经常被用于展示大图,为了构建此类的 lightbox,你可以通过一个图片创建一个动态面板,当图片的缩略图被点击时,lightbox 面板就会暗化背景,显示大图。使用动态面板显示一张图片也可以设置相似的状态达到同样新的效果。

查看例子

视频 Lightbox

image

使用内嵌的窗口,视频能够通过 lightbox 进行播放。

当你想隐藏 lightbox 时,你应该添加一个动作,让其在所有浏览器中适当地被隐藏。

查看例子

创建一个居中的,背景暗化的 Lightbox

将图片和画面装换成动态面板

image

首先打开AxureLightboxTutorial.rp ,然后打开 Lightbox Tutorial 页面。

我们先选择图片和矩形,同过右键单击选中 Convert to Dynamic Panel选项,将他们转换成动态面板。将其标记为 lightbox。

在一个交互动作中,我们能够隐藏和显示多个小部件。

隐藏它

image

在显示 lightbox 之前,我们想让它处于隐藏状态,所以右键单击它,点击 Set Hidden 选项。

捎到浏览器去

image

选中 lightbox,在 Properties 选项板中单击 Pin to Browser 选项。

在弹窗中,选上 pin to browser window,然后选上 Center 和 Middle。点击 OK。

然后当 lightbox 显示时就会出现在屏幕中间了。

添加 OnClick 事件到按钮

image

选中名为 Show Lightbox 的按钮,在 Interactions 选项板中双击 OnClick 事件。

在更多选项中选中 treat as lightbox

image

在事例编辑器中,从 More Options 下拉列表选中 treat as lightbox。

这个设置将在颜色选择器中指定显示小部件与彩色背景。


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)