基础 - JavaScript 实用程序

Foundation 包括用于添加常用功能的 JavaScript 实用程序。它非常有帮助并且易于使用。此 JavaScript 实用程序库可以在文件夹Your_folder_name/node_modules/foundation-sites/js中找到

盒子

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]);

键盘

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库是所有响应式 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){});

运动与移动

Foundation.Motion javascript 与 Foundation 6 中包含的 Motion UI 库类似。它用于创建自定义 CSS 过渡和动画。
js /foundation.util.motion.js是脚本文件名，可以在编写代码时包含它。
Foundation.Move用于使 CSS3 支持的动画变得简单而优雅。
请求动画帧（）；方法告诉浏览器执行动画；它要求在浏览器执行下一次重绘之前调用您的动画函数。

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

当动画完成时，finished.zf.animate被触发。

计时器和图像已加载

Orbit 同时使用功能计时器和加载的图像。js /foundation.util.timerAndImageLoader.js是脚本文件名，可以在编写代码时包含它。

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

当图像完全加载时，图像加载方法会在 jQuery 集合中运行回调函数。

Foundation.onImagesLoaded($images, callback);

触碰

这些方法用于添加伪拖动事件和滑动到元素。
js /foundation.util.touch.js是脚本文件名，可以在编写代码时包含该文件名。
addTouch方法用于将元素绑定到移动设备的 Slider 插件中的触摸事件。
SpotSwipe方法将元素绑定到移动设备 Orbit 插件中的滑动事件。

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

触发器

它触发所选元素的指定事件。
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);

各种各样的

Foundation 核心库中包含的功能很少，但在很多地方都会用到。
js /foundation.core.js是脚本文件名，可以在编写代码时包含该文件名。
Foundation.GetYoDigits([number, namespace])返回带有命名空间的随机 base-36 uid。默认返回6个字符的字符串长度。
Foundation.getFnName(fn)返回 JavaScript 函数名称。
Foundation.transitionend在 CSS 转换完成时发生。