JavaScript

我们的 JavaScript 易于设置，只需 jQuery 即可开始使用。

安装

您可以从 ZIP 下载、包管理器或 CDN 获取 Foundation JavaScript 文件。查看安装页面了解更多信息。

获取文件后，将 jQuery 和 Foundation 的链接作为 <script> 标签添加到页面底部，就在结束 <body> 标签之前。

<!-- 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 实用程序页面了解更多信息。

像这样加载许多单独的文件会造成大量的网络开销，特别是对于移动网络上的用户。为了让您的页面快速加载，我们建议使用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 模块以删除未使用的代码（请参阅下面的树摇）。
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(逗号分隔，如此简单) 一样。我们确实努力减少了需要参数的公共方法的数量，但请查看插件的页面以查看它是否需要其他信息。

当然，如果您以编程方式创建插件，则可以直接调用方法

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

以下划线开头的插件方法被视为内部 API 的一部分，这意味着它们可能会在没有警告的情况下更改、中断或消失。我们建议仅使用公共 API，每个插件的页面上都有记录。

事件

每个插件在某些函数完成时都会触发 DOM 事件。例如，您可以监听选项卡何时更改或侧边菜单何时打开，并创建一个回调来响应它。

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

请参阅每个插件的文档以查看其触发的事件列表以及触发时间。

从 Foundation 6 开始，我们删除了作为插件设置的回调。所有使用插件回调的操作都应作为事件监听器完成。