Foundation - 下拉窗格 JavaScript 参考
Foundation 为下拉窗格提供了 JavaScript 组件，如下所示。
初始化
您可以使用 foundation.dropdown.js 和 foundation.core.js 插件在 JavaScript 中初始化窗格。foundation.core.js 插件需要以下库 −
foundation.util.keyboard.js
foundation.util.box.js
Foundation.Dropdown
它指定了下拉列表的实例，如下所示 −
var my_element = new Foundation.Dropdown(element);
下拉菜单包含表格中列出的以下事件 −
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
element 它将一个 jQuery 对象创建到下拉列表中。 |
jQuery |
| 2 |
options 它将覆盖默认插件设置。 |
对象 |
插件选项
您可以使用以下插件选项自定义下拉实例。
| Sr.No. | 姓名 &描述 | 示例 |
|---|---|---|
| 1 |
hoverDelay 指定悬停事件发生时打开子菜单所需的时间。 |
250 |
| 2 |
hover 悬停事件发生时打开子菜单。 |
false |
| 3 |
hoverPane 悬停在下拉菜单上时不关闭下拉菜单窗格 |
true |
| 4 |
vOffset 它提供打开下拉窗格和触发元素时的像素数。 |
1 |
| 5 |
hOffset 它提供打开下拉窗格和触发元素时的像素数。 |
1 |
| 6 |
positionClass 用于调整将类应用于调整。 |
'top' |
| 7 |
trapFocus 如果您使用键盘命令打开下拉菜单，此插件会将焦点捕获到下拉窗格中。 |
false |
| 8 |
autoFocus 用于将焦点设置在窗格上的元素上。 |
true |
事件
下拉窗格提供以下事件，如表 − 所列
| Sr.No. | 姓名 &描述 |
|---|---|
| 1 |
closeme.zf.dropdown 用于关闭其他打开的下拉菜单。 |
| 2 |
show.zf.dropdown 显示下拉窗格时显示下拉窗格。 |
函数
下拉窗格提供以下函数 −
.getPositionClass − 它指定下拉窗格的当前位置。
.open −它显示下拉窗格并使用冒泡事件触发以关闭其他下拉菜单。
.close − 它关闭打开的下拉窗格。
.toggle − 它切换下拉窗格。
.destroy − 它销毁下拉窗格。
foundation_containers.html
