離畫布

JavaScript

離畫布面板置於視窗外，並在啟動時滑入。在 Foundation 中設定離畫布版面非常容易。

好消息！我們已更新離畫布，以提供更多更好的功能。另一個好處是標記簡化了。此新版本適用於版本 6.3+。我們努力避免重大變更，因此任何標記更新都會列在本頁面的遷移區段中。

Foundation 的離畫布是導覽的既定行動裝置樣式，也可用于建立回應式側邊欄。它可以從任何方向開啟，包括左、右、上和下。您可以選擇讓離畫布推動您的頁面或與您的頁面重疊，以及其他一些巧妙的技巧。

設定

設定 Off-canvas 只需要兩個元素！要設定 Off-canvas，請建立一個具有類別 .off-canvas 和屬性 data-off-canvas 的 off-canvas 容器。這是用來容納 Off-canvas 內容的容器。

Off-canvas 容器也需要一個定位類別來決定它從視窗的哪一側開啟

.position-left
.position-right
.position-top
.position-bottom

觀看影片中的這部分

也要確保 off-canvas 面板具有唯一的 ID，以便點擊觸發器可以針對它。

範例

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <!-- Your menu or Off-canvas content goes here -->
</div>

除了 Off-canvas 容器外，您頁面的主要內容將會容納在它自己的容器中，該容器具有類別 .off-canvas-content 和屬性 data-off-canvas-content。這是您的頁面內容所在的位置。

<div class="off-canvas-content" data-off-canvas-content>
  <!-- Your page content lives here -->
</div>

因此，將所有內容組合起來

<body>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <!-- Your menu or Off-canvas content goes here -->
  </div>
  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
  </div>
</body>

包裝器

您可以在 off-canvas 和內容周圍新增一個選用包裝器。這會隱藏主體將會有的垂直（在頂部/底部 off-canvas）或水平（在左側/右側 off-canvas）捲軸列。只要新增一個具有類別 .off-canvas-wrapper 的容器即可。

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Your page content lives here -->
    </div>
  </div>
</body>

點擊觸發器

若要建立開啟面板的點擊觸發器，請將屬性 data-open 或 data-toggle 新增到任何元素。然後，當點擊該元素時，它會開啟或切換面板。資料屬性的值應該是 off-canvas 的 ID。

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

關閉按鈕

Foundation 的關閉元件可以在 off-canvas 內部使用來關閉它。

<button class="close-button" aria-label="Close menu" type="button" data-close>
  <span aria-hidden="true">&times;</span>
</button>

完整範例

以下是完整的範例，可以貼到您頁面的 <body> 標籤中。它包含一個關閉按鈕和基本的選單樣式。

<body>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
  </div>
</body>

Off-canvas 位置

Foundation 的 Off-canvas 預設使用 .off-canvas 類別設定為 position: fixed。這會讓 off-canvas 面板與視窗相關聯，並且是大多數使用者想要的效果。不過，您也可以使用替代類別 .off-canvas-absolute 將 off-canvas 容器設定為 position: absolute。使用此方法時，也要務必使用 .off-canvas-wrapper。

<button type="button" class="button" data-toggle="offCanvasLeftSplit1">Open Left</button>
<button type="button" class="button" data-toggle="offCanvasRightSplit2">Open Right</button>

<div class="grid-x grid-margin-x">
  <div class="cell small-6">
    <div class="off-canvas-wrapper">
      <div class="off-canvas-absolute position-left" id="offCanvasLeftSplit1" data-off-canvas>
        <!-- Your menu or Off-canvas content goes here -->
      </div>
      <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content>
        <p>I have nothing to do with the off-canvas on the right!</p>
      </div>
    </div>
  </div>
  <div class="cell small-6">
    <div class="off-canvas-wrapper">
      <div class="off-canvas-absolute position-right" id="offCanvasRightSplit2" data-off-canvas>
        <!-- Your menu or Off-canvas content goes here -->
      </div>
      <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content>
        <p>Im a unique off-canvas container all on my own!</p>
      </div>
    </div>
  </div>
</div>

我與右邊的 off-canvas 無關！

我是一個獨一無二的 off-canvas 容器！

Off-canvas 指示

Foundation 的 Off-canvas 可以從任何方向開啟，左、右、上和下。

Off-canvas 容器需要一個定位類別來決定它從視窗的哪一側開啟

.position-left
.position-right
.position-top
.position-bottom

<button type="button" class="button" data-toggle="offCanvasLeft1">Open Left</button>
<button type="button" class="button" data-toggle="offCanvasRight1">Open Right</button>
<button type="button" class="button" data-toggle="offCanvasTop1">Open Top</button>
<button type="button" class="button" data-toggle="offCanvasBottom1">Open Bottom</button>

<div class="cell">
  <div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvasLeft1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-right" id="offCanvasRight1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-top" id="offCanvasTop1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-bottom" id="offCanvasBottom1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <img src="https://placehold.it/300x300" class="" height="" width="" alt="">
    </div>
  </div>
</div>

多個面板

一個設計可以有多個面板。請確保所有面板都出現在 .off-canvas-content 包裹之前，這是為了讓 CSS 正確套用。

在從右到左模式下使用 Foundation 時，「右」仍然表示右邊，「左」仍然表示左邊。

<body>
  <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas></div>
  <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas></div>
  <div class="off-canvas-content" data-off-canvas-content></div>
</body>

Off-canvas 轉場

您可以將 off-canvas 的預設轉場從開啟時推開頁面改為與頁面重疊，方法是將 data-transition="overlap" 加入 .off-canvas。有 2 個可用的轉場：推開（data-transition="push"）是預設，和重疊（data-transition="overlap"）。

將 off-canvas 放置在 off-canvas-content 容器內作為巢狀 Off-Canvas 時，只可能使用重疊轉場。如果您明確定義推開轉場，它會自動被替換為重疊。

<div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
  <!-- Your menu or Off-canvas content goes here -->
</div>
<div class="off-canvas position-right" id="offCanvasRightPush" data-off-canvas data-transition="push">
  <!-- Your menu or Off-canvas content goes here -->
</div>

在較大的螢幕上顯示

左右兩邊的 off-canvas 窗格可以設定為在較大的螢幕上持續顯示，就像側邊欄一樣。將類別 .reveal-for-medium 或 .reveal-for-large 加入 off-canvas 選單。這些類別決定 off-canvas 預設開啟的斷點。

主要內容區域（.off-canvas-content）會向左或向右填補與容器寬度相等的空白。

選單預設為固定位置，表示當您上下捲動時，它會跟著移動。如果選單比視窗高，它也會取得自己的捲軸。若要停用這些功能，請將 $offcanvas-fixed-reveal 變數設定為 false。

當這些類別處於作用中時，外掛程式仍可以滑入/滑出。如果您在較大的螢幕上使用此功能，請務必在那些較大的斷點上隱藏任何點擊觸發器。Foundation 的可見度類別可以協助您執行此動作。

<div class="off-canvas position-left reveal-for-large" data-off-canvas>
  <!-- ... -->
</div>

與標題列結合

如果您需要一個簡單的列來包含您的漢堡包圖示並切換 off-canvas，.title-bar 可以提供協助。它支援靠左和靠右對齊的區塊。您可以在這裡加入您的 off-canvas 切換觸發器

<div class="title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
    <span class="title-bar-title">Foundation</span>
  </div>
  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
  </div>
</div>

Foundation

當在垂直離畫布使用 `title-bar` 時，標題列圖示仍然是 `title-bar-left` 或 `title-bar-right`。

<div class="title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button" data-open="offCanvasTop"></button>
    <span class="title-bar-title">Foundation title bar with top off-canvas</span>
  </div>
  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-open="offCanvasTop"></button>
  </div>
</div>

基礎標題列與頂部離畫布

離畫布（將所有內容組合在一起）

有關離畫布的範例，請查看這個具有離畫布導覽和下拉式選單的頂部列建構區塊：https://foundation.dev.org.tw/building-blocks/blocks/multilevel-offcanvas-menu.html

畫布內到畫布外

使用此功能，您可以在特定中斷點將標準頁面元素移出畫布。請使用 `inCanvasOn` 選項。畫布內與在較大螢幕顯示功能不同，因為它不會針對特定螢幕大小開啟離畫布，而是覆寫離畫布樣式，使其表現為一般頁面元素。這樣一來，您就可以將元素放置在頁面的任何位置，並將其移至離畫布中，例如僅限於小螢幕。

由於大部分工作都是透過 CSS 完成的，因此 `inCanvasOn` 選項會自動新增 `in-canvas-for-[中斷點]` 類別。不過，您也可以自行新增此類別，這將會覆寫選項。

<button type="button" class="button hide-for-large" data-toggle="inCanvasExample">
  Open in-canvas that is off-canvas now
</button>
<div class="off-canvas position-right" id="inCanvasExample" data-off-canvas data-options="inCanvasOn:large;">
  <div class="callout">I'm in-canvas for medium screen size and move off-canvas for medium down.</div>
</div>

我在中型螢幕大小中位於畫布內，並在中型螢幕以下移出畫布。

巢狀離畫布

在 v6.4 中，離畫布元件已大幅擴充。除了畫布內功能之外，現在可以將元素巢狀在內容中，而不僅限於將其用作同層元素。如果您想要將同一個元素用於小螢幕（例如離畫布）和大型螢幕（例如一般頁面元素）而不會重複內容，這將會很方便。

另一項改進是支援多個離畫布元素共享同一個位置，例如兩個具有 `position-left` 的元素。

進階離畫布使用者可以使用新的 `contentId` 選項將元素繫結到內容。這樣一來，您可以更靈活地放置元素，因為它可能是內容的同層元素、子元素或都不是。
重要：在巢狀元素上使用 `contentId` 時，您也必須使用新的 `nested` 選項，並告訴 JavaScript 它已巢狀！

請注意，無法對巢狀離畫布元素使用推播轉場。

<button type="button" class="button" data-toggle="offCanvasNestedPush">
  Open Nested Off-Canvas Push
</button>
<button type="button" class="button" data-toggle="offCanvasNestedOverlap">
  Open Nested Off-Canvas Overlap
</button>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<div class="off-canvas position-left is-closed" id="offCanvasNestedPush" data-off-canvas>
  <div class="callout">
    <p>I'm a nested off-canvas that mustn't be a sibling of the off-canvas content anymore.</p>
    <p>Since push transition is currently not possible for nested elements, I'm forced to use overlayp transition.</p>
  </div>
</div>
<div class="off-canvas position-left is-closed" data-transition="overlap" id="offCanvasNestedOverlap" data-off-canvas>
  <div class="callout">I'm a nested off-canvas that uses overlap transition and the same position as the other nested off-canvas.</div>
</div>

<p>Enim, repudiandae officia dolores temporibus soluta, ipsa saepe tempora ipsum laudantium in mollitia quidem, nisi magni provident hic architecto rem culpa beatae.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

我是嵌套離畫布，不再是離畫布內容的同層元素。

由於目前嵌套元素無法使用推開轉場，因此我被迫使用覆蓋轉場。

我是嵌套離畫布，使用重疊轉場，且位置與其他嵌套離畫布相同。

Enim, repudiandae officia dolores temporibus soluta, ipsa saepe tempora ipsum laudantium in mollitia quidem, nisi magni provident hic architecto rem culpa beatae.

離畫布捲軸方塊

如果 contentScroll: false，在離畫布中放置可捲動元素很棘手，因為在觸控裝置上，由於事件傳播停止，捲動這些元素可能會很困難。無法持續觸控移動。

但是，當您將 data-off-canvas-scrollbox 新增到可捲動元素時，您仍然可以做到這一點。當您觸控移動時，一旦到達捲軸方塊的開始/結束，離畫布將繼續捲動離畫布元素。您也可以選擇使用帶有 data-off-canvas-scrollbox-outer 的包裝器，它會取代離畫布元素進行捲動。當您將可捲動元素巢狀到其他可捲動元素中或使用固定高度時，這很有用。

<div class="off-canvas-wrapper">
  <div class="off-canvas-content" data-off-canvas-content style="min-height: 300px;">
    <div class="grid-x">
      <div class="cell">
        <div class="primary callout">
          You have to view this example on a touch device or use e.g. the chrome dev tools with touch emulation.
        </div>
        <button type="button" class="button" data-toggle="offCanvasScrollbox">
          Open Scrollbox Off-canvas
        </button>
      </div>
    </div>
    <div class="off-canvas-absolute position-left" id="offCanvasScrollbox" data-off-canvas data-content-scroll="false">
      <div style="padding: 0 1rem;">
        <article data-off-canvas-scrollbox style="max-height: 290px; overflow: auto; padding: 0.5rem 0; margin-bottom: 1rem; box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
          <p>The 1st list supports continuous touchmove</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
        <article style="max-height: 290px; overflow: auto; padding: 0.5rem 0; margin-bottom: 1rem; box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
          <p>The 2nd list doesn't support continuous touchmove</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
        <article style="padding: 0.5rem 0;">
          <p>The 3rd list is regular content</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
      </div>
    </div>
  </div>
</div>

您必須在觸控裝置上檢視此範例，或使用具有觸控模擬功能的 Chrome 開發人員工具。

第 1 個清單支援持續觸控移動

項目符號 01
項目符號 02
項目符號 03
項目符號 04
項目符號 05
項目符號 06
項目符號 07
項目符號 08
項目符號 09
項目符號 10

第 2 個清單不支援持續觸控移動

項目符號 01
項目符號 02
項目符號 03
項目符號 04
項目符號 05
項目符號 06
項目符號 07
項目符號 08
項目符號 09
項目符號 10

第 3 個清單是常規內容

項目符號 01
項目符號 02
項目符號 03
項目符號 04
項目符號 05
項目符號 06
項目符號 07
項目符號 08
項目符號 09
項目符號 10

固定

預設情況下，當使用推開轉場開啟離畫布時，具有 position: fixed 的元素會消失。原因是離畫布內容容器的轉換屬性會導致固定元素出現 position: absolute 行為。

好消息：我們新增了保留固定外觀的可能性！您只需將屬性 data-off-canvas-sticky 新增到每個固定元素，這些元素應在開啟離畫布後保持固定。

請注意，使用此屬性將強制選項 `contentScroll: false`

<div class="top-bar sticky" data-sticky data-off-canvas-sticky>
  Sticky top bar that will remain sticky after having opened an off-canvas
</div>

離畫布大小

在 v6.4.2 中，畫布外尺寸變數的類型已從數字變更為映射。這可讓您定義中斷點特定尺寸，而非所有中斷點使用一個值。映射可能包含在 $breakpoint-classes 中定義的每個鍵。

請注意，尺寸映射目前無法完美地用於顯示類別。如果為中型和大尺寸定義尺寸，則 `.reveal-for-medium` 將只考慮中型值。這將在未來的版本中得到修復。

$offcanvas-sizes: (
  small: 250px,
  medium: 350px,
);
$offcanvas-vertical-sizes: (
  small: 250px,
  medium: 350px,
);

從 v6.4 之前的版本進行移轉

如果您從 v6.3 升級，則無需執行任何操作，除非您尚未變更 $offcanvas-shadow 的預設值。在 v6.4 之前，此變數用於重疊和推動畫布外元素。現在，它僅用於重疊元素，而推動元素使用兩個新變數

$offcanvas-inner-shadow-size，它是一個數字（通常為 px）
$offcanvas-inner-shadow-color，它是一個顏色（通常為 rgba）

因此，如果您已變更預設畫布外陰影，則必須在設定中調整這些變數的值。

從 v6.3 之前的版本進行移轉

在新的畫布外中不再需要 `off-canvas-wrapper` 和 `off-canvas-wrapper-inner`。如果您將它們保留在 6.3+ 中，則畫布外將按預期工作。

預設畫布外位置已從絕對位置變更為固定位置。這可能是您想要的，因為無論捲動位置如何，開啟選單時選單都會出現在檢視中。您可以使用內建類別將畫布外位置選回絕對位置

.is-overlay-absolute
.is-overlay-fixed

或在 _settings.scss 中全域設定，將 $offcanvas-fixed-reveal 變數設定為 false。

<div class="off-canvas position-left reveal-for-large" data-off-canvas>
  <!-- ... -->
</div>

6.3 之前的畫布外設定

首先，建立兩個包裝器來容納頁面。這些包裝器是必要的，以防止畫布外面板在未開啟時可見。它們還能消除跨瀏覽器的錯誤。

外層包裝器具有類別 .off-canvas-wrapper。
內層包裝器具有類別 .off-canvas-wrapper-inner 和屬性 data-off-canvas-wrapper。

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper></div>
  </div>
</body>

在這些包裝器內，建立一個具有類別 .off-canvas 和屬性 data-off-canvas 的畫布外面板。面板還需要一個定位類別，可以是 .position-left 或 .position-right，以及一個設定為位置的屬性，data-position="left" 或 data-position="right"。最後，請確定畫布外面板具有唯一的 ID，以便可以設定目標。

與面板一起，您頁面的主要內容將放置在具有類別 .off-canvas-content 和屬性 data-off-canvas-content 的容器中。您將把實際的頁面內容放在 .off-canvas-content 的類別中。）

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
      <div class="off-canvas-content" data-off-canvas-content></div>
    </div>
  </div>
</body>

Sass 參考

變數

專案的設定檔中可以使用這些 Sass 變數自訂此元件的預設樣式。

名稱	類型	預設值	說明
`$offcanvas-sizes`	對應	`small: 250px`	左/右側離畫布面板的寬度對應。
`$offcanvas-vertical-sizes`	對應	`small: 250px`	上/下側離畫布面板的高度對應。
`$offcanvas-background`	顏色	`$light-gray`	離畫布面板的背景顏色。
`$offcanvas-shadow`	陰影	`0 0 10px rgba($black, 0.7)`	離畫布重疊面板的方塊陰影。
`$offcanvas-inner-shadow-size`	數字	`20px`	離畫布推動面板的內部方塊陰影大小。
`$offcanvas-inner-shadow-color`	顏色	`rgba($black, 0.25)`	離畫布推動面板的內部方塊陰影顏色。
`$offcanvas-overlay-zindex`	數字	`11`	離畫布內容覆蓋層的 Z-index。
`$offcanvas-push-zindex`	數字	`12`	具有 `push` 轉場的離畫布面板的 Z-index。
`$offcanvas-overlap-zindex`	數字	`13`	具有 `overlap` 轉場的離畫布面板的 Z-index。
`$offcanvas-reveal-zindex`	數字	`12`	使用 `reveal-for-*` 類別或混合的離畫布面板的 Z-index。
`$offcanvas-transition-length`	數字	`0.5s`	離畫布面板上動畫的長度。
`$offcanvas-transition-timing`	關鍵字	`ease`	離畫布面板上動畫的計時功能。
`$offcanvas-fixed-reveal`	布林值	`true`	如果為 `true`，顯示的離畫布將會是固定位置，並隨著畫面捲動。
`$offcanvas-exit-background`	顏色	`rgba($white, 0.25)`	離畫布面板開啟時出現的覆蓋層的背景顏色。
`$maincontent-class`		`'off-canvas-content'`	用於主要內容區域的 CSS 類別。離畫布混合使用此類別來鎖定頁面內容。
`$titlebar-background`	顏色	`$black`	標題列的背景顏色。
`$titlebar-color`	顏色	`$white`	標題列中文字的顏色。
`$titlebar-padding`	長度	`0.5rem`	標題列中的內距。
`$titlebar-text-font-weight`	粗細	`bold`	標題列中文字的粗細。
`$titlebar-icon-color`	顏色	`$white`	標題列中選單圖示的顏色。
`$titlebar-icon-color-hover`	顏色	`$medium-gray`	將滑鼠游標移到標題列中選單圖示上的顏色。
`$titlebar-icon-spacing`	長度	`0.25rem`	標題列中選單圖示與文字之間的間距。

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。你可以自行使用混合，從我們的元件中建立自己的類別結構。

off-canvas-basics

@include off-canvas-basics;

新增 off-canvas 的基本樣式。此 CSS 是讓其他部分運作的必要條件。

off-canvas-base

@include off-canvas-base;

新增 off-canvas 面板的基本樣式。

off-canvas-position

@include off-canvas-position;

新增樣式，將 off-canvas 面板定位到左/右/上/下。

off-canvas-content

@include off-canvas-content;

設定內容容器的樣式。

off-canvas-reveal

@include off-canvas-reveal;

新增顯示 off-canvas 面板的樣式。

in-canvas

@include in-canvas;

覆寫 off-canvas 樣式

JavaScript 參考

初始化

若要使用此外掛程式，JavaScript 中必須包含下列檔案

foundation.core.js
foundation.offcanvas.js
- 含公用程式程式庫 foundation.util.keyboard.js
- 含公用程式程式庫 foundation.util.mediaQuery.js
- 含公用程式程式庫 foundation.util.triggers.js

Foundation.OffCanvas

建立 off-canvas 包裝器的新的執行個體。

var elem = new Foundation.OffCanvas(element, options);

觸發這些事件： OffCanvas#event:init

名稱	類型	說明
`element`	物件	要初始化的 jQuery 物件。
`options`	物件	覆寫預設的外掛程式設定。

外掛程式選項

使用這些選項自訂 Off-canvas 的執行個體。外掛程式選項可以設定為個別的資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛程式建構函式的物件。深入了解 JavaScript 外掛程式如何初始化。

名稱	類型	預設	說明
`data-close-on-click`	`布林值`	`true`	允許使用者點選選單外側來關閉選單。
`data-content-overlay`	`布林值`	`true`	在 `[data-off-canvas-content]` 上方新增一個覆蓋層。
`data-content-id`	`字串`	`null`	透過 ID 定位離畫布內容容器，可以放置在任何地方。如果為 null，將採用最近的內容容器。
`data-nested`	`布林值`	`null`	定義離畫布元素嵌套在離畫布內容中。在為嵌套元素使用 contentId 選項時，這是必需的。
`data-content-scroll`	`布林值`	`true`	在離畫布面板開啟時，啟用/停用主內容的捲動。
`data-transition-time`	`字串`	`null`	開啟和關閉轉場所需的時間，包括適當的毫秒 (`ms`) 或秒 (`s`) 單位（例如 `500ms`、`.75s`）。如果未選取任何選項，將從主體樣式中提取。
`data-transition`	`字串`	`push`	離畫布選單的轉場類型。選項為 'push'、'detached' 或 'slide'。
`data-force-to`	`字串`	`null`	強制頁面在開啟時捲動到頂部或底部。
`data-is-revealed`	`布林值`	`false`	允許離畫布在某些斷點處保持開啟狀態。
`data-reveal-on`	`字串`	`null`	要顯示的斷點。JS 將使用正規表示法來鎖定標準類別，如果要變更類別名稱，請使用 `revealClass` 選項傳遞類別。
`data-in-canvas-on`	`字串`	`null`	離畫布移入畫布內容並作為常規頁面元素的斷點。
`data-auto-focus`	`布林值`	`true`	在開啟時強制將焦點移至離畫布。如果為 true，將在關閉時將焦點移至開啟觸發器。
`data-reveal-class`	`字串`	`reveal-for-`	用於強制離畫布保持開啟狀態的類別。Foundation 的預設值為 `reveal-for-large` 和 `reveal-for-medium`。
`data-trap-focus`	`布林值`	`false`	在開啟離畫布時觸發選用的焦點鎖定。將 [data-off-canvas-content] 的 tabindex 設定為 -1 以便於存取。

事件

這些事件將從附加離畫布外掛程式的任何元素中觸發。

名稱	說明
`opened.zf.offCanvas`	在離畫布選單開啟時觸發。
`openedEnd.zf.offCanvas`	在離畫布選單開啟轉場完成時觸發。
`close.zf.offCanvas`	在離畫布選單關閉時觸發。
`closed.zf.offCanvas`	在離畫布選單關閉轉場完成時觸發。

方法

揭露

$('#element').foundation('reveal', isRevealed);

在斷點處理顯示/隱藏離畫布，與開啟不同。

名稱	類型	說明
`isRevealed`	布林值	如果元素應揭露，則為 true。

開啟

$('#element').foundation('open', event, trigger);

開啟離畫布選單。

觸發這些事件： OffCanvas#event:opened

名稱	類型	說明
`事件`	物件	從監聽器傳遞的事件物件。
`觸發器`	jQuery	觸發離畫布開啟的元素。

關閉

$('#element').foundation('close', cb);

關閉離畫布選單。

觸發這些事件： OffCanvas#event:close OffCanvas#event:closed

名稱	類型	說明
`cb`	函式	關閉後觸發的選用 cb。

切換

$('#element').foundation('toggle', event, trigger);

切換離畫布選單開啟或關閉。

名稱	類型	說明
`事件`	物件	從監聽器傳遞的事件物件。
`觸發器`	jQuery	觸發離畫布開啟的元素。

_destroy

$('#element').foundation('_destroy');

銷毀 OffCanvas 外掛程式。