基础 - 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 实用程序中详细研究特定的插件要求。

加载单个文件会产生网络开销，特别是对于移动用户而言。为了更快地加载页面，建议使用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'); 
// 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!');
});