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插件。
例如 -
使用插件
使用数据属性， 插件连接到 HTML 元素， 因为它们匹配插件的名称。 一个 HTML 元素一次只能有一个插件， 尽管大多数插件可以嵌套在其他插件中。 例如， 工具提示链接是通过添加
data - tooltip 来创建的。如需更多信息，点击此处。
配置插件
插件可以使用其配置设置进行自定义。 例如， 您可以设置
accordion 上下滑动的速度。可以使用插件的
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');
// 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 选择器， 如果选择器包含多个插件， 那么它们都会调用相同的 selected 方法。
可以像向 JavaScript 传递参数一样传递参数。
以 underscore(_) 为前缀的方法被视为内部 API 的一部分，这意味着它们可以在没有警告的情况下中断、更改甚至消失。
活动
每当一个特定的函数完成时， DOM 就会触发一个事件。 例如， 无论何时更改选项卡， 都可以监听它并创建对它的返回响应。 每个插件都可以触发事件列表， 这些事件将记录在插件的文档中。 在 Foundation 6 中， 回调插件被移除， 必须作为事件监听器使用。
例如 -
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});
