- 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 Mixin
- Foundation 庫
- Foundation - Motion UI
- Foundation 有用資源
- Foundation - 快速指南
- Foundation - 有用資源
- Foundation - 討論
Foundation - 側邊欄 JavaScript 參考
Foundation 提供如下列出的側邊欄 JavaScript 元件。
初始化
您可以使用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);
側邊欄包含下表列出的事件：
| 序號 | 名稱和描述 | 型別 |
|---|---|---|
| 1 |
元素 它初始化 jQuery 物件。 |
物件 |
| 2 |
選項 它覆蓋預設的外掛設定。 |
物件 |
外掛選項
您可以使用以下外掛選項來自定義側邊欄例項。
| 序號 | 名稱和描述 | 示例 |
|---|---|---|
| 1 |
closeOnClick 當用戶點選選單外部時，它會關閉選單。 |
true |
| 2 |
transitionTime 它指定開啟和關閉轉換所需的時間（毫秒）。 |
500 |
| 3 |
position 它定義側邊欄應從哪個方向開啟。 |
left |
| 4 |
forceTop 它強制頁面在開啟時滾動到頂部。 |
|
| 5 |
isRevealed 它將開啟側邊欄，直到到達剩餘的斷點。 |
false |
| 6 |
revealOn 它定義在哪個斷點處顯示側邊欄。 |
reveal-for-large |
| 7 |
autoFocus 開啟時，它會將焦點放在側邊欄上。 |
true |
| 8 |
revealClass 此類用於強制側邊欄保持開啟狀態。 |
reveal-for-large |
事件
側邊欄提供下表列出的事件：
| 序號 | 名稱和描述 |
|---|---|
| 1 |
opened.zf.off-canvas 開啟側邊欄選單時觸發此事件。 |
| 2 |
closed.zf.off-canvas 開啟側邊欄選單時觸發此事件。 |
函式
側邊欄提供如下定義的函式：
.reveal
它將開啟側邊欄，直到到達剩餘的斷點。它具有下表中指定的函式：
| 序號 | 名稱和描述 | 型別 |
|---|---|---|
| 1 |
isRevealed 如果此函式設定為 true，則顯示元素。 |
布林值 |
.open
它將開啟側邊欄選單。它具有下表中指定的函式：
| 序號 | 名稱和描述 | 型別 |
|---|---|---|
| 1 |
事件 它傳遞來自偵聽器的事件物件。 |
物件 |
| 2 |
觸發器 它觸發一個元素以開啟側邊欄。 |
jQuery |
.close
它關閉側邊欄選單。
.toggle
它切換側邊欄選單。它具有下表中指定的函式：
| 序號 | 名稱和描述 | 型別 |
|---|---|---|
| 1 |
事件 它傳遞來自偵聽器的事件物件。 |
物件 |
| 2 |
觸發器 它觸發一個元素以開啟側邊欄。 |
jQuery |
.destroy
它銷燬側邊欄外掛。