基础 - JavaScript实用程序

基础JavaScript实用程序 - 从简单和简单的步骤学习基础，从基本到高级概念，包括概述，安装，入门项目，厨房水槽，全局样式，Sass，JavaScript，JavaScript实用程序，媒体查询，网格，Flex网格，表单，可见性类，基本排版，排版助手，按钮，按钮组，关闭按钮，滑块，开关，导航，菜单，下拉菜单和向下钻取菜单，手风琴菜单，响应导航，麦哲伦，分页，面包屑，容器，手风琴，标注，下拉菜单-panes，媒体对象，画布，显示模态，表格，标签，Flex视频，标签，轨道，进度条，工具提示，插件，遵守，均衡器，交换，Toggler，粘滞，Sass功能和Mixins，运动UI。

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

键盘

有很多方法 Foundation.Keyboard ，有助于简化键盘事件交互.
js/foundation.util.keyboard .js 是脚本文件名，可以在编写代码时包含.
对象 Foundation.Keyboard.keys 包含键/值对，更频繁地在框架中使用哪些键.
每当按下键时， Foundation.Keyboard.parseKey 被调用来获取字符串.这有助于管理您自己的键盘输入.

以下代码用于查找给定 $元素中的所有可聚焦元素的.因此，您无需编写任何函数和选择器.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

handleKey 函数是该库的主要功能.
此方法用于处理键盘事件;只要在实用程序中注册任何插件，就可以调用它.

Foundation.Keyboard.register('pluginName', {   'TAB': 'next'});...//in event callbackFoundation.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.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&移动

Foundation.Motion javascript类似于Motion UI库，它包含在基础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);

触摸

这些方法用于添加伪拖动事件并滑动到元素.
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事件.
scroll()方法在滚动事件发生时触发滚动事件.

$('#someId').on('scrollme.zf.trigger', handleScroll);$('#someId').on('resizeme.zf.trigger', handleResize);

其他

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