Foundation - 侧边栏 JavaScript 参考

Foundation 提供如下列出的侧边栏 JavaScript 组件。

初始化

您可以使用foundation.offcanvas.js和foundation.core.js插件在JavaScript中初始化面板。foundation.core.js插件需要以下库：

foundation.util.triggers.js
foundation.util.motion.js

Foundation.OffCanvas

它指定如下定义的侧边栏包装器的实例：

var my_element = new Foundation.OffCanvas(element);

侧边栏包含下表列出的事件：

序号	名称和描述	类型
1	元素它初始化 jQuery 对象。	对象
2	选项它覆盖默认的插件设置。	对象

序号

名称和描述

类型

元素

它初始化 jQuery 对象。

对象

选项

它覆盖默认的插件设置。

对象

插件选项

您可以使用以下插件选项来自定义侧边栏实例。

序号	名称和描述	示例
1	closeOnClick 当用户点击菜单外部时，它会关闭菜单。	true
2	transitionTime 它指定打开和关闭转换所需的时间（毫秒）。	500
3	position 它定义侧边栏应从哪个方向打开。	left
4	forceTop 它强制页面在打开时滚动到顶部。
5	isRevealed 它将打开侧边栏，直到到达剩余的断点。	false
6	revealOn 它定义在哪个断点处显示侧边栏。	reveal-for-large
7	autoFocus 打开时，它会将焦点放在侧边栏上。	true
8	revealClass 此类用于强制侧边栏保持打开状态。	reveal-for-large

事件

侧边栏提供下表列出的事件：

序号	名称和描述
1	opened.zf.off-canvas 打开侧边栏菜单时触发此事件。
2	closed.zf.off-canvas 打开侧边栏菜单时触发此事件。

序号

名称和描述

opened.zf.off-canvas

打开侧边栏菜单时触发此事件。

closed.zf.off-canvas

打开侧边栏菜单时触发此事件。

函数

侧边栏提供如下定义的函数：

.reveal

它将打开侧边栏，直到到达剩余的断点。它具有下表中指定的函数：

序号	名称和描述	类型
1	isRevealed 如果此函数设置为 true，则显示元素。	布尔值

序号

名称和描述

类型

isRevealed

如果此函数设置为 true，则显示元素。

布尔值

.open

它将打开侧边栏菜单。它具有下表中指定的函数：

序号	名称和描述	类型
1	事件它传递来自侦听器的事件对象。	对象
2	触发器它触发一个元素以打开侧边栏。	jQuery

序号

名称和描述

类型

事件

它传递来自侦听器的事件对象。

对象

触发器

它触发一个元素以打开侧边栏。

jQuery

.close

它关闭侧边栏菜单。

.toggle

它切换侧边栏菜单。它具有下表中指定的函数：

序号	名称和描述	类型
1	事件它传递来自侦听器的事件对象。	对象
2	触发器它触发一个元素以打开侧边栏。	jQuery

序号

名称和描述

类型

事件

它传递来自侦听器的事件对象。

对象

触发器

它触发一个元素以打开侧边栏。

jQuery

.destroy

它销毁侧边栏插件。

foundation_containers.htm

打印页面