Foundation JavaScript 实用程序
Foundation 包含用于添加常用功能的 JavaScript 实用程序。它非常有用且易于使用。这个 JavaScript 实用程序库可以在文件夹
Your_folder_name/node_modules/foundation-sites/js中找到
Box
Foundation.Box 库由几个方法组成。
js/foundation.util.box.js 是脚本文件名，可以在编写代码时包含。
jQuery 对象或纯 JavaScript 元素都可以传递给这两种方法。
var dims = Foundation.Box.GetDimensions(element);
返回的对象将
元素的维度指定为-
{
height: 54,
width: 521,
offset: {
left: 198,
top: 1047
},
parentDims: {
height: ... //The same format is share for parentDims and windowDims as the element dimensions.
},
windowDims: {
height: ...
}
}
包括函数 ImNotTouchingYou。
根据传入的元素，返回一个布尔值，要么是与窗口边缘冲突，要么是可选的，要么是父元素。
在下面给出的行中指定的两个选项，即 leftAndRightOnly、topAndBottomOnly 仅用于识别一个轴上的碰撞。
var clear = Foundation.Box.ImNotTouchingYou (
element [, parent, leftAndRightOnly, topAndBottomOnly]);
Keyboard
Foundation.Keyboard 中有很多方法，可以帮助简化键盘事件交互。
js/foundation.util.keyboard.js 是脚本文件名，可以在编写代码时包含。
对象 Foundation.Keyboard.keys 包含键/值对，哪些键在框架中使用频率更高。
无论何时按下该键，都会调用 Foundation.Keyboard.parseKey 以获取字符串。这有助于管理您自己的键盘输入。
以下代码用于查找给定
$element 内的所有可聚焦元素。因此，您无需编写任何函数和选择器。
var focusable = Foundation.Keyboard.findFocusable($('#content'));
handleKey 函数是这个库的一个主要函数。
该方法用于处理键盘事件；每当向实用程序注册任何插件时都可以调用它。
Foundation.Keyboard.register('pluginName', {
'TAB': 'next'
});
...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
next: function(){
//do stuff
}
});
Foundation.Keyboard.register 函数可以在您想使用自己的键绑定时调用。
MediaQuery
MediaQuery 库是所有响应式 CSS 技术的支柱。
js/foundation.util.mediaQuery.js 是脚本文件名，可以在编写代码时包含。
Foundation.MediaQuery.atLeast('large') 用于检查屏幕是否至少与断点一样宽。
Foundation.MediaQuery.get('medium') 获取断点的媒体查询。
Foundation.MediaQuery.queries 是一组媒体查询，Foundation 用于断点。
Foundation.MediaQuery.current 是当前断点大小的字符串。
Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;
以下代码在窗口上广播媒体查询更改。
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});
Motion & Move
Foundation.Motion javascript 类似于 Motion UI 库，包含在 Foundation 6 中。它用于创建自定义 CSS 过渡和动画。
js/foundation.util.motion.js 是脚本文件名，可以在编写代码时包含。
Foundation.Move 用于使 CSS3 支持的动画简单而优雅。
requestAnimationFrame(); 方法告诉浏览器执行动画；它要求在浏览器执行下一次重绘之前调用您的动画函数。
Foundation.Move(durationInMS, $element, function() {
//animation logic
});
当动画完成时，
finished.zf.animate 被触发。
Timer & Images Loaded
Orbit 同时使用函数计时器和加载的图像。
js/foundation.util.timerAndImageLoader.js 是脚本文件名，可以在编写代码时包含。
var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);
当图像完全加载时，图像加载方法会在您的 jQuery 集合中运行回调函数。
Foundation.onImagesLoaded($images, callback);
Touch
这些方法用于添加伪拖动事件和滑动到元素。
js/foundation.util.touch.js 是脚本文件名，可以在编写代码时包含。
addTouch 方法用于在移动设备的 Slider 插件中将元素绑定到触摸事件。
spotSwipe 方法将元素绑定到移动设备的 Orbit 插件中的滑动事件。
$('selector').addTouch().on('mousemove', handleDrag);
$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);
Triggers
它为所选元素触发指定的事件。
js/foundation.util.triggers.js 是脚本文件名，可以在编写代码时包含。
许多 Foundation 插件都使用了触发器。
$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);
此库中使用了以下两种方法，即调整大小和滚动。
resize() 方法在发生 resize 事件时触发 resize 事件。
scroll() 方法在滚动事件发生时触发滚动事件。
$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);
Miscellaneous
Foundation 在核心库中包含的功能很少，但在很多地方都使用过。
js/foundation.core.js 是脚本文件名，可以在编写代码时包含。
Foundation.GetYoDigits([number, namespace]) 返回一个带有命名空间的随机 base-36 uid。默认返回 6 个字符的字符串长度。
Foundation.getFnName(fn) 返回一个 JavaScript 函数名称。
Foundation.transitionend 在 CSS 过渡完成时发生。
