Foundation - Off-canvas JavaScript 参考
Foundation 为 Off-canvas 提供 JavaScript 组件，如下所示。
初始化
您可以使用 foundation.offcanvas.js 和 foundation.core.js 插件在 JavaScript 中初始化窗格。 foundation.core.js 插件需要以下库 −
foundation.util.triggers.js
foundation.util.motion.js
Foundation.OffCanvas
它指定了 off-canvas 包装器的实例，定义如下 −
var my_element = new Foundation.OffCanvas(element);
Off-canvas 包括表中列出的以下事件 −
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
Element 它初始化 jQuery 对象。 |
对象 |
| 2 |
Options 它覆盖默认插件设置。 |
对象 |
插件选项
您可以使用以下插件选项自定义画布外实例。
| Sr.No. | 姓名 &描述 | 示例 |
|---|---|---|
| 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 |
事件
画布外提供以下事件，如表 − 所示。
| Sr.No. | 名称和说明 |
|---|---|
| 1 |
opened.zf.off-canvas 打开画布外菜单时触发事件。 |
| 2 |
closed.zf.off-canvas 打开画布外菜单时触发事件。 |
函数
Off-canvas 提供以下函数，定义如下 −
.reveal
它将打开画布外，直到到达剩余的断点。它具有表中指定的以下函数 −
| Sr.No. | 名称和说明 | 类型 |
|---|---|---|
| 1 |
isRevealed 如果此函数设置为 true，则会显示元素。 |
boolean |
.open
它将打开画布外菜单。它具有表中指定的以下功能 −
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
event 它从侦听器传递事件对象。 |
对象 |
| 2 |
trigger 它触发一个元素来打开画布外菜单。 |
jQuery |
.close
它关闭画布外菜单。
.toggle
它切换画布外菜单。它具有表中指定的以下功能 −
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
event 它从侦听器传递事件对象。 |
对象 |
| 2 |
trigger 它触发一个元素来打开画布外。 |
jQuery |
.destroy
它销毁画布外插件。
foundation_containers.html
