基础 - 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!');
});

打印页面