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