目录

基础 - JavaScript( JavaScript)

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

JavaScript安装

您可以使用ZIP下载,包管理器或CDN来获取Foundation JavaScript文件。 在您的代码中,您可以提供指向jQuery和Foundation的链接作为 有关更多信息, 请单击此处

文件结构

当您通过命令行安装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 Utilities中详细了解特定的插件要求。

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

初始化 (Initializing)

foundation()函数用于一次初始化所有Foundation插件。

例如 -

(document).foundation();	

使用插件

使用数据属性,插件连接到HTML元素,因为它们与插件的名称相匹配。 虽然大多数插件可以嵌套在其他插件中,但单个HTML元素一次只能有一个插件。 例如,工具提示链接是通过添加data-tooltip创建的。 有关更多信息, 请单击此处

配置插件

可以使用其配置设置自定义插件。 例如,您可以设置accordion幻灯片的速度上下。 可以使用插件的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。

  • underscore(_)为前缀的方法被视为内部API的一部分,这意味着,在没有警告的情况下,它们可以破坏,更改甚至消失。

事件 (Events)

每当特定函数完成时,DOM就会触发一个事件。 例如,每当更改选项卡时,都可以监听它并创建对它的返回响应。 每个插件都可以触发事件列表,这些事件将在插件的文档中记录。 在Foundation 6中,删除了回调插件,必须将其作为事件侦听器。

例如 -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});
↑回到顶部↑
WIKI教程 @2018