某些插件可能需要特定的实用程序库，这些实用程序库随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').html(data).foundation();
});

程序化使用

在JavaScript中，可以以编程方式创建插件，每个插件都是Global 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!');
});