JavaScript Reference

优质
小牛编辑
130浏览
2023-12-01

Foundation为Off-canvas提供JavaScript组件,如下所示。

初始化 (Initializing)

您可以使用foundation.offcanvas.jsfoundation.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

它破坏了画布上的插件。