- Foundation 常規
- Foundation - 全域性樣式
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript 工具函式
- Foundation - 媒體查詢
- Foundation - 網格系統
- Foundation - Flex 網格
- Foundation - 表單
- Foundation - 可見性類
- Foundation - 基本排版
- Foundation - 排版輔助類
- Foundation - 基本控制元件
- Foundation - 導航
- Foundation - 容器
- Foundation - 媒體
- Foundation - 外掛
- Foundation SASS
- Foundation - Sass 函式
- Foundation - Sass 混合宏
- Foundation 庫
- Foundation - Motion UI
- Foundation 有用資源
- Foundation - 快速指南
- Foundation - 有用資源
- Foundation - 討論
Foundation - 鑽取式選單 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);
| 序號 | 名稱和描述 | 型別 |
|---|---|---|
| 1 |
element 它將 jQuery 物件建立為一個鑽取式選單。 |
jQuery |
| 2 |
options 覆蓋預設外掛設定。 |
物件 |
外掛選項
您可以使用以下外掛自定義鑽取式選單例項。您可以將外掛選項設定為單獨的資料屬性。
| 序號 | 名稱和描述 | 示例 |
|---|---|---|
| 1 |
backButton 需要 js-drilldown-back 類。對於 JS 生成的後退按鈕，使用標記。 |
<\li><\a>Back<\/a><\/li> |
| 2 |
wrapper 需要 is-drilldown 類以進行獨立的樣式設定。 |
<\div class = "is-drilldown"><\/div> |
| 3 |
closeOnClick 點選主體可以幫助選單返回到根列表。 |
false |
事件
附加到任何元素的鑽取式選單外掛可以觸發以下事件。
| 序號 | 名稱和描述 |
|---|---|
| 1 |
closed.zf.drilldown menu 當選單完全關閉時觸發事件。 |
| 2 |
hide.zf.drilldown menus 當開啟的子選單關閉時觸發事件。 |
函式
以下是鑽取式選單中使用的函式。
._hideAll
它關閉所有已開啟的元素，並返回到根選單。
._back
每個 back 按鈕中都包含事件偵聽器。
| 序號 | 名稱和描述 | 型別 |
|---|---|---|
| 1 |
$elem back 事件包含在當前子選單中。 |
jQuery |
._show
子選單開啟。
| 序號 | 名稱和描述 | 型別 |
|---|---|---|
| 1 |
$elem 開啟當前子選單。 |
jQuery |
._hide
子選單隱藏。
| 序號 | 名稱和描述 | 型別 |
|---|---|---|
| 1 |
$elem 隱藏當前子選單 |
jQuery |
.destroy
銷燬鑽取式選單。
foundation_navigation.htm
廣告