HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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: ...    //parentDims 和 windowDims 与元素尺寸共享相同的格式。
   },
   
   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

  • 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 支持的动画简单而优雅。

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

图像完全加载后，image-loaded 方法会在 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() 方法会触发调整大小事件。

  • 当发生滚动事件时，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 转换完成时发生。

❮ 上一节 下一节 ❯