Foundation - Drilldown JavaScript 参考
Foundation 为向下钻取菜单提供了 JavaScript 组件,如下所示。
初始化
您可以使用 foundation.drilldown.js 和 foundation.core.js 插件在 JavaScript 中初始化向下钻取菜单。该插件需要以下库 −
foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.nest.js
Foundation.Drilldown
它指定了如下定义的向下钻取菜单的实例 −
var elem = new Foundation.Drilldown(element);
Sr.No. | 名称 &描述 | 类型 |
---|---|---|
1 |
element 它在下拉菜单中创建一个 jQuery 对象。 |
jQuery |
2 |
options 默认插件设置是覆盖。 |
对象 |
插件选项
您可以使用以下插件自定义下拉菜单实例。您可以将插件选项设置为单独的数据属性。
Sr.No. | 名称和说明 | 示例 |
---|---|---|
1 |
backButton js-drilldown-back 类是必需的。对于 JS 生成的后退按钮,使用标记。 |
<\li><\a>Back<\/a><\/li> |
2 |
wrapper is-drilldown 类是独立样式所必需的。 |
<\div class = "is-drilldown"><\/div> |
3 |
closeOnClick 单击主体可帮助菜单返回根列表。 |
false |
事件
附加到任何元素的下钻菜单插件都可以触发以下事件。
Sr.No. | 名称和说明 |
---|---|
1 |
closed.zf.drilldown 菜单 当菜单完全关闭时触发事件。 |
2 |
hide.zf.drilldown 菜单 当打开的子菜单关闭时触发事件。 |
函数
以下是下拉式菜单中使用的函数。
._hideAll
关闭所有打开的元素,并返回到根菜单。
._back
每个 back 按钮都包含事件监听器。
Sr.No. | 姓名 &描述 | 类型 |
---|---|---|
1 |
$elem back 事件包含在当前子菜单中。 |
jQuery |
._show
子菜单已打开。
Sr.No. | 名称 &描述 | 类型 |
---|---|---|
1 |
$elem 打开当前子菜单。 |
jQuery |
._hide
子菜单已隐藏。
Sr.No. | 名称 &描述 | 类型 |
---|---|---|
1 |
$elem 隐藏当前子菜单 |
jQuery |
.destroy
向下钻取菜单已销毁。