Учебники

Foundation — Утилиты JavaScript

Декабрь 21, 2018

Foundation включает в себя утилиты JavaScript, которые используются для добавления общих функций. Это очень полезно и просто в использовании. Эту библиотеку утилит JavaScript можно найти в папке Your_folder_name / node_modules / foundation-sites / js

коробка

  • Библиотека Foundation.Box состоит из нескольких методов.

  • Js / foundation.util.box.js — это имя файла сценария, которое может быть включено при написании кода.

  • Либо объекты jQuery, либо простые элементы JavaScript могут быть переданы обоим методам.

Библиотека 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, используются для идентификации столкновения только по одной оси.

Функция 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 для получения строки. Это помогает управлять своими собственными клавиатурными входами.

В Foundation.Keyboard есть много методов, которые помогают упростить взаимодействие с клавиатурой.

Js / foundation.util.keyboard.js — это имя файла сценария, которое может быть включено при написании кода.

Объект Foundation.Keyboard.keys состоит из пар ключ / значение, ключи которых используются в каркасе чаще.

При каждом нажатии клавиши вызывается Foundation.Keyboard.parseKey для получения строки. Это помогает управлять своими собственными клавиатурными входами.

Следующий код используется для поиска всех фокусируемых элементов в данном элементе $ . Следовательно, вам не нужно писать какие-либо функции и селектор. 

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

  • Функция handleKey является основной функцией этой библиотеки.

  • Этот метод используется для обработки события клавиатуры; он может быть вызван всякий раз, когда любой плагин зарегистрирован в утилите.

Функция 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 является строкой текущего размера точки останова.

Библиотека 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){});

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

  • Javascript Foundation.Motion похож на библиотеку Motion UI, которая входит в состав Foundation 6. Он используется для создания пользовательских переходов и анимации CSS.

  • Js / foundation.util.motion.js — это имя файла сценария, которое может быть включено при написании кода.

  • Foundation.Move используется для того, чтобы сделать CSS3-анимацию простой и элегантной.

  • requestAnimationFrame (); метод говорит браузеру выполнить анимацию; он запрашивает, чтобы ваша анимационная функция была вызвана до того, как браузер выполнит следующую перерисовку.

Javascript Foundation.Motion похож на библиотеку Motion UI, которая входит в состав Foundation 6. Он используется для создания пользовательских переходов и анимации CSS.

Js / foundation.util.motion.js — это имя файла сценария, которое может быть включено при написании кода.

Foundation.Move используется для того, чтобы сделать CSS3-анимацию простой и элегантной.

requestAnimationFrame (); метод говорит браузеру выполнить анимацию; он запрашивает, чтобы ваша анимационная функция была вызвана до того, как браузер выполнит следующую перерисовку. 

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

Когда анимация завершена, запускается файл Finish.zf.animate.

Таймер и изображения загружены

Орбита использует и функцию таймера, и загруженное изображение. 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 для мобильных устройств.

Методы используются для добавления событий псевдо перетаскивания и пролистывания к элементам.

Js / foundation.util.touch.js — это имя файла сценария, которое может быть включено при написании кода.

Метод addTouch используется для привязки элементов к событиям касания в плагине Slider для мобильных устройств.

Метод spotSwipe привязывает элементы к событиям смахивания в плагине Orbit для мобильных устройств. 

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Триггеры

  • Это вызывает указанное событие для выбранных элементов.

  • Js / foundation.util.triggers.js — это имя файла сценария, которое может быть включено при написании кода.

  • Триггеры используются во многих базовых плагинах.

Это вызывает указанное событие для выбранных элементов.

Js / foundation.util.triggers.js — это имя файла сценария, которое может быть включено при написании кода.

Триггеры используются во многих базовых плагинах. 

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

В этой библиотеке используются следующие два метода: изменение размера и прокрутка.

Метод resize () запускает событие resize, когда происходит событие resize.

Метод scroll () запускает событие прокрутки при возникновении события прокрутки.

Foundation содержит несколько функций в базовой библиотеке, которые используются во многих местах.

Js / foundation.core.js — это имя файла сценария, которое может быть включено при написании кода.

Foundation.GetYoDigits ([число, пространство имен]) возвращает случайный идентификатор base-36 с пространством имен. Он возвращает длину строки из 6 символов по умолчанию.

Foundation.getFnName (fn) возвращает имя функции JavaScript.

Foundation.transitionend происходит, когда CSS-переход завершен.

52
Share: