基礎 - JavaScript

本章我們將學習JavaScript。在 Foundation 中設定 JavaScript 很容易；你只需要 jQuery。

JavaScript 安裝

您可以使用 ZIP 下載、包管理器或 CDN 獲取 Foundation JavaScript 檔案。在您的程式碼中，您可以在結束 `<body>` 標記前新增指向 jQuery 和 Foundation 的連結作為 `<script>` 標籤，並確保 Foundation 在 jQuery 之後載入。更多資訊，點選此處。

檔案結構

當您透過命令列安裝 Foundation 時，Foundation 外掛會下載為單獨的檔案，例如 foundation.tabs.js、foundation.dropdownMenu.js、foundation.slider.js 等等。所有這些檔案都合併到 foundation.js 中，一次性提供所有外掛。如果您想使用某個外掛，首先應載入 foundation.core.js。

例如 -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

某些外掛可能需要特定的實用程式庫，這些庫隨 Foundation 安裝一起提供。您可以在下一章JavaScript 工具函式中詳細瞭解特定外掛的要求。

載入單個檔案會產生網路開銷，特別是對於移動使用者而言。為了加快頁面載入速度，建議使用grunt 或gulp。

初始化

foundation() 函式用於一次性初始化所有 Foundation 外掛。

例如 -

(document).foundation();

使用外掛

使用資料屬性，外掛會連線到與外掛名稱匹配的 HTML 元素。單個 HTML 元素一次只能有一個外掛，儘管大多數外掛可以巢狀在其他外掛中。例如，工具提示連結是透過新增 data-tooltip 建立的。更多資訊，點選此處。

配置外掛

可以使用外掛的配置設定來自定義外掛。例如，您可以設定手風琴的向上和向下滑動速度。可以使用外掛的 DEFAULTS 屬性全域性更改外掛設定。更多資訊，點選此處。

頁面載入後新增外掛

當向 DOM 新增新的 HTML 時，這些元素上的任何外掛預設情況下都不會被初始化。您可以透過重新呼叫 .foundation() 函式來檢查新的外掛。

例如 -

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

程式設計使用

在 JavaScript 中，可以以程式設計方式建立外掛，每個外掛都是全域性 Foundation 物件的類，具有一個建構函式，該建構函式採用兩個引數，例如元素和物件。

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

大多數外掛都提供公共 API，允許您透過 JavaScript 來操作它。您可以檢視外掛文件以瞭解可用的函式和方法，可以輕鬆呼叫。

例如 -

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

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

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

您可以選擇任何 jQuery 選擇器，如果選擇器包含多個外掛，則所有外掛都將呼叫相同的方法。
可以像傳遞引數給 JavaScript 一樣傳遞引數。
以下劃線 (_)為字首的方法被認為是內部 API 的一部分，這意味著它們可能會在沒有任何警告的情況下中斷、更改甚至消失。

事件

每當特定函式完成時，DOM 都會觸發一個事件。例如，每當選項卡更改時，就可以監聽並對其做出響應。每個外掛都可以觸發一系列事件，這些事件將在外掛文件中記錄。在 Foundation 6 中，回撥外掛已被移除，必須作為事件監聽器來使用。

例如 -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

列印頁面