JavaScript 工具

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

{
  height: 54,
  width: 521,
  offset: {
    left: 198,
    top: 1047
  },
  parentDims: {
    height: ... // parentDims and windowDims share the same format as the element dimensions.
  },
  windowDims: {
    height: ...
  }
}

var clear = Foundation.Box.ImNotTouchingYou(element [, parent, leftAndRightOnly, topAndBottomOnly]);

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

// Trap focus to given element
Foundation.Keyboard.trapFocus($('#content'));

// Release focus from given element
Foundation.Keyboard.releaseFocus($('#content'));

Foundation.Keyboard.register('pluginName', {
  'TAB': 'next'
});
...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
  next: function(){
    //do stuff
  }
});

Foundation.MediaQuery.get('medium');
// returns the minimum pixel value for the `medium` breakpoint.
Foundation.MediaQuery.atLeast('large');
// returns a boolean if the current screen size is, you guessed it, at least `large`.
Foundation.MediaQuery.queries;
// an array of media queries Foundation uses for breakpoints.
Foundation.MediaQuery.current;
// a string of the current breakpoint size.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

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

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

Foundation.onImagesLoaded($images, callback);

$('selector').addTouch().on('mousemove', handleDrag);
// Binds elements to touch events. Used in the Slider plugin for mobile devices.
$('selector').on('swipeleft', handleLeftSwipe);
// Binds elements to swipe events. Used in the Orbit plugin for mobile devices.

<button data-open="someId">I open something!</button>
<button data-close="someId">I close something!</button>
<button data-toggle="someId">I toggle something!</button>

// Add the data-open/close/toggle="idOfElement" tag to your markup.
// When a click event is triggered on that element, these are the non-bubbling events directed at your element.
// If you don't use an `id` selector, an event will be triggered that bubbles up to window.
$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

<div data-scroll="someId">...</div>
<div data-resize="someId">...</div>

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

// Button click handler
$('.button').on('click', function(e){
  // Handle Click
});

// Resize function
$(window).on('resize', function(e){
  // Do responsive stuff
});

// Throttled resize function
$(window).on('resize', Foundation.util.throttle(function(e){
  // Do responsive stuff
}, 300));

// Arguments:
//    Func (Function): Function to be throttled.
//
//    Delay (Integer): Function execution threshold in milliseconds.
//
// Returns:
//    Lazy_function (Function): Function with throttling applied.

throttle(func, delay) { ... }