JavaScript Reference
Foundation为Off-canvas提供JavaScript组件，如下所示。
初始化 (Initializing)
您可以使用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);
Off-canvas包括表中列出的以下事件 -
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 | element 它初始化jQuery对象。 | Object |
| 2 | options 它会覆盖默认插件设置。 | Object |
插件选项 (Plugin Options)
您可以使用以下插件选项来自定义画布外实例。
| Sr.No. | 名称和描述 | 例 |
|---|---|---|
| 1 | closeOnClick 当用户点击菜单外部时，它会关闭菜单。 | true |
| 2 | transitionTime 它指定以ms为单位打开和关闭转换所需的时间。 | 500 |
| 3 | position 它定义了非画布应该打开的方向。 | left |
| 4 | forceTop 它会在页面打开时强制页面滚动到顶部。 | |
| 5 | isRevealed 它将打开画布，直到到达剩余的断点。 | false |
| 6 | revealOn 它定义了断开Off-canvas的断点。 | reveal-for-large |
| 7 | autoFocus 当它开放时它专注于画外画。 | true |
| 8 | revealClass 此类用于强制非画布保持打开状态。 | reveal-for-large |
事件 (Events)
Off-canvas提供表中列出的以下事件 -
| Sr.No. | 名称和描述 |
|---|---|
| 1 | opened.zf.off-canvas 它会在打开画布菜单时触发事件。 |
| 2 | closed.zf.off-canvas 它会在打开画布菜单时触发事件。 |
功能 (Functions)
Off-canvas提供以下定义的功能 -
.reveal
它将打开画布，直到到达剩余的断点。 它具有表中指定的以下功能 -
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 | isRevealed 如果此函数设置为true，则显示元素。 | Boolean |
.open
它将打开画布菜单。 它具有表中指定的以下功能 -
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 | event 它从侦听器传递事件对象。 | Object |
| 2 | trigger 它触发一个元素来打开画布。 | jQuery |
.close
它关闭了画布外的菜单。
.toggle
它切换了画布上的菜单。 它具有表中指定的以下功能 -
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 | event 它从侦听器传递事件对象。 | Object |
| 2 | trigger 它触发一个元素来打开画布。 | jQuery |
.destroy
它破坏了画布上的插件。