Foundation - Утилиты 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

Библиотека MediaQuery - это основа всей техники адаптивного CSS.
В js/foundation.util.mediaQuery.js это имя файла сценария, которое можно включить при написании кода.
Foundation.MediaQuery.atLeast ( «большой») используется для проверки , если экран по крайней мере , так широко , как в контрольной точке.
Foundation.MediaQuery.get ( «средний») получает запрос в средствах массовой информации в контрольной точке.
В 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){});

Движение и движение

JavaScript Foundation.Motion похож на библиотеку 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);

Триггеры

Он запускает указанное событие для выбранных элементов.
В 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 ([число, пространство имен]) возвращает случайный uid по основанию 36 с пространством имен. По умолчанию он возвращает строку длиной 6 символов.
Foundation.getFnName (fn) возвращает имя функции JavaScript.
Foundation.transitionend возникает после завершения перехода CSS.