Foundation - JavaScript
在本章中，我们将学习 JavaScript。在 Foundation 中设置 JavaScript 很容易；您唯一需要的就是 jQuery。
JavaScript 安装
您可以使用 ZIP 下载、包管理器或 CDN 获取 Foundation JavaScript 文件。在您的代码中，您可以将 jQuery 和 Foundation 的链接作为 <script> 标签提供，放置在结束 <body> 之前，并检查 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 Utilities中详细了解特定插件的要求。
加载单个文件会产生网络开销，特别是对于移动用户。为了更快地加载页面，建议使用grunt或gulp。
初始化
foundation()函数用于一次性初始化所有 Foundation 插件。
例如 −
(document).foundation();
使用插件
使用数据属性，插件与 HTML 元素相连接，因为它们与插件的名称相匹配。单个 HTML 元素一次只能有一个插件，但大多数插件可以嵌套在其他插件中。例如，通过添加 data-tooltip 来创建工具提示链接。有关更多信息，请单击此处。
配置插件
可以使用其配置设置自定义插件。例如，您可以设置手风琴幻灯片上下移动的速度。可以使用插件的 DEFAULTS 属性全局更改插件设置。如需了解更多信息，请点击此处。
页面加载后添加插件
将新 HTML 添加到 DOM 时，默认情况下不会初始化这些元素上的任何插件。您可以通过重新调用 .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');
// 这将销毁页面上的所有工具提示。
$('#reveal').foundation('open');
// 这将打开一个 ID 为 `reveal` 的 Reveal 模式。
$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// 这会将页面上的第一个选项卡更改为您选择的任何面板。
您可以选择任何 jQuery 选择器，如果选择器包含多个插件，则它们都将具有相同的选择方法。
可以像将参数传递给 JavaScript 一样传递参数。
以 underscore(_) 为前缀的方法被视为内部 API 的一部分，这意味着它们可能会在没有任何警告的情况下中断、更改甚至消失。
事件
每当特定函数完成时，DOM 都会触发事件。例如，每当更改选项卡时，都可以监听它并创建对其的返回响应。每个插件都可以触发事件列表，这些事件将记录在插件的文档中。在 Foundation 6 中，回调插件已被删除，必须作为事件监听器。
例如 −
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});
