Foundation - Reveal JavaScript 参考

Foundation 为显示模式提供 JavaScript 组件，如下所示 −

初始化

您可以使用 foundation.reveal.js 和 foundation.core.js 插件在 JavaScript 中初始化窗格。 foundation.core.js 插件需要以下库 −

它指定了如下所示的 reveal 实例 −

var my_element = new Foundation.Reveal(element);

显示包括表格中列出的以下值 −

Sr.No.	名称 &描述	类型
1	Element 它使用 jQuery 对象作为模态框。	数字
2	Options 它指定模态框的可选参数。	对象

Sr.No.

名称 &描述

类型

Element

它使用 jQuery 对象作为模态框。

数字

Options

它指定模态框的可选参数。

对象

您可以使用以下插件选项自定义显示实例。

Sr.No.	姓名 &描述	示例
1	animationIn 用于动画元素。	'slide-in-left'
2	animationOut 用于动画元素。	'slide-out-right'
3	showDelay 显示打开模式所需的时间毫秒。	10
4	hideDelay 显示关闭模态框所需的时间(毫秒)。	10
5	closeOnClick 单击主体或覆盖层时关闭模态框。	true
6	closeOnEsc 单击主体或覆盖层时关闭模态框。 'ESCAPE' 键。	true
7	multipleOpened 一次显示多个模态框。	false
8	vOffset 指定模态框从屏幕顶部向下推的距离(以像素为单位)。	100
9	hOffset 指定模态框向下推的距离(以像素为单位)从屏幕顶部向下。	0
10	fullScreen 您可以根据窗口的宽度和高度创建全屏模式。	false
11	btmOffsetPct 当模态框应从视图底部向上推时，它指定屏幕高度的百分比。	10
12	overlay 当模态框打开时，它将生成一个覆盖 div。	true
13	resetOnClose 它指定在关闭模态框时应重置它。	false

Reveal 提供以下事件，如表所示−

序号	活动 &描述
1	closeAll.zf.reveal 在打开新模态框之前，关闭所有当前模态框。
2	open.zf.reveal 成功打开模态框时触发事件。
3	closed.zf.reveal 关闭模态框时触发事件。

序号

活动 &描述

closeAll.zf.reveal

在打开新模态框之前，关闭所有当前模态框。

open.zf.reveal

成功打开模态框时触发事件。

closed.zf.reveal

关闭模态框时触发事件。

Reveal 提供以下功能函数 −

Sr.No.	函数 &描述
1	.open 它将打开由 this.$anchor 控制的模态框并关闭其他模态框。
2	.close 它将关闭模态框。
3	.toggle 它切换模态框的状态。
4	.destroy 它会销毁模态实例。