基础 - JavaScript

在本章中，我们将研究 JavaScript .在Foundation中设置JavaScript很容易;唯一需要的是jQuery.

JavaScript安装

您可以使用ZIP下载，包管理器或CDN来获取Foundation JavaScript文件.在您的代码中，您可以提供指向jQuery和Foundation的链接，作为< script>标签，放置在关闭之前< body>并检查在jQuery之后加载Foundation.有关详细信息.

文件结构

当您通过命令行安装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插件.

例如 :

(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中，可以通过编程方式创建插件，每个插件都是全局基础对象的类，带有一个带有两个参数的构造函数，例如元素和对象.

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