JavaScript

我們的 JavaScript 很容易設定，且只需要 jQuery 即可開始使用。

安裝

您可以從 ZIP 下載、套件管理員或 CDN 取得 Foundation JavaScript 檔案。請查看安裝頁面以進一步了解。

取得檔案後，請在頁面底部，於 <body> 標籤關閉前，新增連結至 jQuery 和 Foundation 作為 <script> 標籤。

<!-- jQuery must be imported before Foundation -->
<script src="js/jquery.min.js"></script>
<!-- this will include every plugin and utility required by Foundation -->
<script src="js/foundation.min.js"></script>

在 HTML 中匯入

您可以在 HTML 中匯入完整的 Foundation 函式庫 foundation.min.js，如上所述，也可以個別匯入每個外掛程式。

<!-- Example of selectively including files -->
<script src="js/jquery.min.js"></script> <!-- Required -->
<script src="js/foundation.core.min.js"></script>  <!-- Required -->
<script src="js/foundation.util.mediaQuery.min.js"></script>
<script src="js/foundation.tabs.min.js"></script>
<script src="js/foundation.accordion.min.js"></script>

請注意，它們都需要先載入 foundation.core.js。某些外掛也需要 Foundation 附帶的特定實用程式函式庫—請參閱外掛文件，以找出哪些外掛需要哪些函式庫，並參閱 JavaScript Utilities 頁面，以取得更多資訊。

像這樣載入許多個別檔案會產生大量的網路負擔，特別是對於行動網路的使用者。為了讓您的網頁快速載入，我們建議使用 Grunt 或 Gulp 等工具，將所有 JavaScript 檔案合併成一個檔案。

在 JavaScript 中匯入

預設情況下，Foundation 會作為 UMD 模組匯出。這表示 Foundation 及其外掛可以在任何 JavaScript 環境中匯入和使用。

例如，使用 ES6（ESM 格式）

import Foundation from 'foundation-sites';
const $dropdown = new Foundation.Dropdown($('#mydropdown'));
// Or
import { Dropdown } from 'foundation-sites';
const $dropdown = new Dropdown($('#mydropdown'));

使用 RequireJs（AMD 格式）

define(['foundation'], function(Foundation) {
  var $dropdown = new Foundation.Dropdown($('#mydropdown'));
});

使用 Node.js（CommonJs 格式）

var Foundation = require('foundation-sites');
var $dropdown = new Dropdown($('#mydropdown'));

可用格式

Foundation 以各種模組格式的套件提供，因此您可以選擇最符合您需求的格式。如果您還不了解這些術語，請參閱這篇 JavaScript 中的模組格式 10 分鐘入門。您可以在 dist/js 資料夾中找到下列套件

foundation.js UMD 預設
相容於大多數環境和工具（AMD、CJS、ESM 等）。它幾乎可以在任何地方運作，方法是檢查您的環境的模組格式，然後使用它，這會讓套件稍微重一點。
foundation.cjs.js CommonJS
專門用於 Node.js 和較舊的套件管理工具，例如 Browserify 或 Webpack v1。
foundation.esm.js ES6 模組（package.json 中的 module）
除了模組之外，所有內容都轉譯成 ES5。專門用於現代套件管理工具，例如 Webpack 2+ 或 Rollup。它們會自動使用此套件，並解析 ES6 模組以移除未使用的程式碼（請參閱下方的 tree shaking）。
foundation.es6.js ES6 (package.json 中的 esnext)
與其他套件不同，此套件未轉譯。它包含一個檔案中所有 ES6 的 Foundation 來源。如果您想手動轉譯它以供您自己的目標使用，請使用它。

樹狀搖晃

許多打包器（例如 Webpack、Rollup 或 Parcel）支援樹狀搖晃。它包含從您的程式碼庫或依賴項中移除未使用的程式碼部分。請查看這些文章以了解它的運作方式以及如何啟用它：如何使用樹狀搖晃清理您的 JavaScript 建置、為什麼 Webpack 2 的樹狀搖晃不如您想像中有效和使用樹狀搖晃減少 JavaScript 負載。

由於樹狀搖晃僅在 ES6 中可用，我們建議匯入下列外掛程式

// Only Dropdown and DropdownMenu will be included in your application.
import { Dropdown, DropdownMenu } from 'foundation-sites';

遺憾的是，這些打包器承諾的「靜態分析」無法偵測依賴項中未使用的程式碼。根據您的建置環境，您可能必須手動匯入 Foundation 外掛程式才能讓它正常運作

// /!\ Don't use this if tree shaking works with standard named imports.
// Only Dropdown and DropdownMenu will be included in your application.
import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';

初始化

jQuery 物件上的 .foundation() 函式將一次啟動每個 Foundation 外掛程式。

$(document).foundation();

您也可以透過在具有外掛程式的其中一個或多個元素上呼叫 .foundation(); 方法來選擇性初始化外掛程式。

$('#foo').foundation(); // initialize all plugins within the element `#foo`
$('.has-tip').foundation(); // initialize all tooltips on the page.

使用外掛程式

外掛程式使用資料屬性附加到 HTML 元素。資料屬性將與外掛程式的名稱相符。例如，將 data-accordion 加入元素會建立手風琴，而加入 data-tooltip 則會建立提示連結。

<p><span data-tooltip aria-haspopup="true" class="has-tip" tabindex="1" title="Fancy word for a beetle.">Scarabaeus</span></p>

聖甲蟲

單一元素一次只能有一個 Foundation 外掛程式。但是，大多數外掛程式可以巢狀在其他外掛程式內。

設定外掛程式

每個外掛程式都有一組設定，用於自訂其運作方式。例如，您可以變更手風琴滑動上下的速度，或提示是否應出現在觸控裝置上。

外掛程式設定可以透過變更外掛程式上的 DEFAULTS 屬性來進行全域變更。

Foundation.Accordion.defaults.slideSpeed = 500;
Foundation.Accordion.defaults.multiExpand = true;

外掛程式的一個個別實例也可以有不同的設定。這些設定可以在 HTML 或 JavaScript 中設定。

在 HTML 中，每個設定可以定義為一個個別的資料屬性。請注意，駝峰式選項會轉換為連字號字詞。在以下範例中，`multiExpand` 會變成 `data-multi-expand`。

<div data-accordion data-slide-speed="500" data-multi-expand="true"></div>

資料選項也可以在一個屬性 `data-options` 中大量設定。選項以 `key: value;` 格式撰寫，每個選項以分號分隔。以上範例可以使用 `data-options` 撰寫如下

<div data-accordion data-options="slideSpeed: 500; multiExpand: true;"></div>

以上規則有一個例外，在 Sticky 外掛程式中。因為傳遞頂部和底部錨點給該外掛程式的途徑，您無法將它們包含在 `data-options` 屬性中。如果您使用單一錨點或根本沒有宣告錨點，您仍然可以使用 `data-options`，並且可以使用它來設定所有其他可用選項。

使用 JavaScript 設定選項包括將物件傳遞到建構函式中，如下所示

var options = {multiExpand: true, allowAllClosed: false};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

值得注意的是，透過 JavaScript 傳遞到外掛程式的選項具有最高優先權，並且會覆寫透過 `data-some-option` 標籤套用的任何預設值或選項。這就是 `data-options="someOption:true; someOtherOption:false" 選項傳遞到建構函式的途徑。因此，如果您要說

<div data-accordion data-slide-speed="500" data-options="slideSpeed:250;">...</div>

您的手風琴元素將具有 250 毫秒的滑動速度。

在頁面載入後新增外掛程式

如果您將新的 HTML 新增到 DOM，這些元素上的任何外掛程式預設都不會初始化。重新呼叫 `foundation()` 函式來檢查新的外掛程式。

$.ajax('assets/partials/kitten-carousel.html', function(data) {
  $('#kitten-carousel').html(data).foundation();
});

已經初始化的外掛程式將會被忽略。但是，基於效能考量，我們建議只在已變更的 DOM 節點上呼叫 `foundation()`。

將內容新增到外掛程式

在 Foundation 的先前版本中，有一個稱為 `reflow` 的外掛程式方法，儘管它在所有外掛程式中並不普遍。對於 Foundation 6，我們新增了一個全域性的 `reInit` 方法，它將移除並重新套用事件監聽器，更新外掛程式的實例資料以取得相關資訊，例如新增新的標籤或內容窗格，以及重設外掛程式可能依賴的任何快取資料。

這個方法可以在外掛程式類別上呼叫

Foundation.reInit('tooltip');

外掛程式類別陣列

Foundation.reInit(['tooltip', 'accordion', 'reveal']);

或使用 jQuery 選取的個別元素或元素集合

Foundation.reInit($('#some-plugin'));
Foundation.reInit($('.some-plugin-class'));

如果傳遞字串，則需要傳遞正確的駝峰式或連字號外掛程式名稱。傳遞 `DropdownMenu` 或 `dropdown-menu` 是等效的。

程式化使用

外掛程式可以在 JavaScript 中以編程方式建立。每個外掛程式都是全域性 Foundation 物件上的類別，其建構函式接受兩個參數：要附加的元素，以及選項物件。

var $accordion = new Foundation.Accordion($('#accordion'), {
  slideSpeed: 500,
  multiExpand: true
});

大多數外掛程式都有公開的 API，讓您能透過 JavaScript 操控它。請參閱外掛程式的文件，以了解有哪些函式可用。呼叫方法就像吃派一樣簡單

$('#reveal').foundation('open'); //will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example')); //will change the first Tabs on the page to whatever panel you choose.

$('.tooltip').foundation('_destroy'); //will destroy all Tooltips on the page.

您可以使用您喜歡的任何 jQuery 選擇器，如果選擇器包含多個外掛程式，它們都會呼叫相同的已選方法。您可以傳遞參數，就像在其他 JavaScript function(comma, delimited, so, easy) 中一樣。我們確實努力減少需要參數的公開方法數量，但請查看外掛程式的頁面，以了解它是否需要其他資訊。

如果您以編程方式建立外掛程式，當然可以直接呼叫方法

var $modal = new Foundation.Reveal($('#some-modal'), options);
$modal.open();

以下劃線開頭的外掛程式方法被視為內部 API 的一部分，這表示它們可能會在沒有警告的情況下變更、中斷或消失。我們建議只使用公開 API，這些 API 記錄在每個外掛程式的頁面上。

事件

當某些函式完成時，每個外掛程式都會觸發 DOM 事件。例如，您可以偵聽標籤變更或側邊欄選單開啟的時間，並建立回呼函式來回應它。

$('[data-tabs]').on('change.zf.tabs', function() {
  console.log('Those tabs sure did change!');
});

請參閱每個外掛程式的文件，以查看它觸發的事件清單，以及觸發時間。

從 Foundation 6 開始，我們已移除回呼函式作為外掛程式設定。所有使用外掛程式的回呼函式都應作為事件監聽器來完成。