基础 - JavaScript



本章我们将学习JavaScript。在 Foundation 中设置 JavaScript 很容易;你只需要 jQuery。

JavaScript 安装

您可以使用 ZIP 下载、包管理器或 CDN 获取 Foundation JavaScript 文件。在您的代码中,您可以在结束 `<body>` 标记前添加指向 jQuery 和 Foundation 的链接作为 `<script>` 标签,并确保 Foundation 在 jQuery 之后加载。更多信息,点击此处

文件结构

当您通过命令行安装 Foundation 时,Foundation 插件会下载为单独的文件,例如 foundation.tabs.jsfoundation.dropdownMenu.jsfoundation.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 工具函数中详细了解特定插件的要求。

加载单个文件会产生网络开销,特别是对于移动用户而言。为了加快页面加载速度,建议使用gruntgulp

初始化

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