
- Foundation 常规
- 基础 - 全局样式
- 基础 - Sass
- 基础 - JavaScript
- 基础 - JavaScript 工具函数
- 基础 - 媒体查询
- 基础 - 网格系统
- 基础 - Flex 网格
- 基础 - 表单
- 基础 - 可见性类
- 基础 - 基本排版
- 基础 - 排版辅助工具
- 基础 - 基本控件
- 基础 - 导航
- 基础 - 容器
- 基础 - 媒体
- 基础 - 插件
- Foundation Sass
- 基础 - Sass 函数
- 基础 - Sass 混合器
- Foundation 库
- 基础 - Motion UI
基础 - JavaScript
本章我们将学习JavaScript。在 Foundation 中设置 JavaScript 很容易;你只需要 jQuery。
JavaScript 安装
您可以使用 ZIP 下载、包管理器或 CDN 获取 Foundation JavaScript 文件。在您的代码中,您可以在结束 `<body>` 标记前添加指向 jQuery 和 Foundation 的链接作为 `<script>` 标签,并确保 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 属性全局更改插件设置。更多信息,点击此处。
页面加载后添加插件
当向 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!'); });