1. WIKI教程
2. 学习Foundation
3. 基础 - JavaScript实用程序( JavaScript Utilities)

基础 - JavaScript实用程序( JavaScript Utilities)

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

Box

• Foundation.Box库由几个方法组成。

• js/foundation.util.box.js是脚本文件名，可以在编写代码时包含它。

• 可以将jQuery对象或纯JavaScript元素传递给两个方法。

var dims = Foundation.Box.GetDimensions(element);

返回的对象将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)

• 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类似于Motion UI库，它包含在Foundation 6中。它用于创建自定义CSS过渡和动画。

• js/foundation.util.motion.js是脚本文件名，可以在编写代码时包含它。

• Foundation.Move用于使CSS3支持的动画简单而优雅。

• requestAnimationFrame(); 方法告诉浏览器执行动画; 它要求在浏览器执行下一次重绘之前调用您的动画函数。

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

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()方法会触发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函数名称。

• 在CSS转换完成时发生Foundation.transitionend 。