EN RU
Форум

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

DocumentationSource

jquery

Блок служит для загрузки и подключения на страницу библиотеки jQuery и ее расширений. Расширения подключаются через зависимости от элементов блока.

Способы использования

modules.require(['jquery'], function($) {
    console.log($);
});

Обзор

Элементы блока

Элемент Способы использования Описание
config JS Настройки jQuery.
event JS Расширения событийной модели jQuery.

Свойства и методы элементов блока

Элемент Имя Тип или возвращаемое значение Описание
config url {String} Строка с URL, подключаемой библиотеки jQuery.

События элементов блока

Элемент Имя Описание
event pointerclick Позволяет избавиться от задержки события click на тач-устройствах.
pointerover Генерируется, когда указатель устройства ввода находится над элементом.
pointerenter Генерируется при входе указателя в активную зону элемента.
pointerdown Генерируется при входе устройства ввода в состояние активного нажатия.
pointermove Генерируется при изменении координат указателя.
pointerup Генерируется по выходу из состояния активного нажатия.
pointerout Генерируется когда указатель покидает зону над элементаом.
pointerleave Генерируется при выходе указателя из активной зоны элемента.
pointerpress Генерируется по событию pointerdown.
pointerrelease Генерируется по событиям pointerup и pointercancel.
pointercancel Генерируется в случаях, когда не предполагается дальнейшее возникновение pointer-событий или после генерации события pointerdown.

Публичные технологии блока

Блок реализован в технологиях:

  • js

Элемент config блока jquery

Элемент предоставляет объект с настройками подключаемой библиотеки jQuery. Настройки хранятся как свойства объекта.

Свойства и методы объекта

Свойство url

Тип: {String}.

Содержит строку с URL для загрузки jQuery. В проекте значение свойства может быть переопределено. Тогда при подключении блока будет использовано новое значение, если библиотека jQuery не была подключена предварительно.

modules.define('jquery__config', function(provide) {

provide({ url: '//foo.bar/my-custom-jquery.js' });
});

Элемент event блока jquery

Элемент реализует поддержку дополнительных типов событий jQuery. Дополнительные типы подключаются с помощью соответствующих значений модификатора type.

Модификаторы элемента

Модификатор type

Предоставляет набор полифилов, реализующих уровень абстракции над jQuery-событиями устройств ввода. Это позволяет создавать общую логику для различных платформ (десктопы, телефоны и т.д.) и дополнять ее методами, специфическими для конкретного вида устройств.

Каждый полифил добавляет набор pointer-событий, для создания аппаратно-независимой логики.

Все pointer-события являются пользовательскими событиями jQuery. Подписка на pointer-события осуществляется стандартным образом:

modules.define(
    'pointer-test',
    ['i-bem__dom', 'jquery'],
    function(provide, BEMDOM, $) {

provide(BEMDOM.decl({ block : this.name }, /** @lends pointer-test.prototype */ {
    onSetMod : {
        'js' : {
            'inited' : function() {
                this.bindTo('pointerpress', this.onPress); // при инициализации подписываемся на pointerpress на самом блоке
            }
        }

    },
    onPress : function(e) {
        console.log(e.type);
        this.bindTo('pointerrelease', this.onRelease); // при вызове обработчика для pointerpress подписываемся на pointerrelease
    },
    onRelease : function(e) {
        console.log(e.type);
        this.unbindFrom('pointerrelease', this.onRelease); // при вызове обработчика для pointerrelease отписываемся от pointerrelease
    }
}));
});

В зависимости от значения модификатора, будут подключены разные полифилы.

Модификатор type в значении pointer

Модификатор для подключения всех типов pointer-событий. Не вводит дополнительной логики.

Модификатор type в значении pointerclick

Подключает полифил, реализующий событие pointerclick.

Событие pointerclick

Генерируется по нажатию левой клавиши мыши или в момент контакта с рабочей поверхностью устройства. Использование pointerclick позволяет избавиться от задержки события click на тач-устройствах.

Модификатор type в значении pointernative

Подключает полифил, реализующий базовую функциональность модели W3C Pointer Events.

С модификатором доступен следующий набор событий:

Событие pointerover

Генерируется в момент:

  • Когда указатель находится над элементом.
  • Перед событием pointerdown, для устройств, не поддерживающих hover.

Событие pointerenter

Генерируется:

  • При входе указателя в активную зону элемента. Когда указатель находится над элементом или одним из его потомков.
  • По событию pointerdown для устройств, не поддерживающих hover.

Событие аналогично pointerover, но не всплывает.

Событие pointerdown

Генерируется в момент, когда устройство ввода входит в состояние активного нажатия:

  • Для мыши – когда хотя бы одна клавиша нажата.
  • Для перьевых и тач- устройств – состояние контакта с рабочей поверхностью устройства.

Событие pointermove

Генерируется при изменении координат указателя.

Событие pointerup

Генерируется по выходу из состояния активного нажатия:

  • Для мыши это соответствует переходу от состояния, когда была нажата хотя бы одна клавиша, к состоянию без нажатых клавиш.
  • Для перьевых и тач- устройств – моменту разрыва контакта с рабочей поверхностью устройства.

Событие pointerout

Генерируется при выходе указателя из активной зоны элемента:

  • Когда указатель покидает зону над элементом или одним из его потомков.
  • После событий pointerup и pointercancel для устройств, не поддерживающих hover. Например, когда стилус (палец) покидает рабочую зону устройства.

Событие pointerleave

Генерируется при выходе указателя из активной зоны элемента:

  • Когда указатель покидает зону над элементом или одним из его потомков.
  • После событий pointerup и pointercancel для устройств, не поддерживающих hover.

Событие аналогично pointerout, но не всплывает.

Событие pointercancel

Генерируется в случаях, когда:

  • Не предполагается дальнейшее возникновение pointer-событий (например, в следствие изменения аппаратных настроек).
  • После генерации события pointerdown, если указатель был использован для масштабирования страницы.

Например, событие генерируется при изменении ориентации устройства пока оно находится в состояние активного нажатия. Или при превышении лимита на количество одновременных нажатий, поддерживаемых устройством.

После генерации события pointercancel последовательно генерируются события pointerout и pointerleave.

Модификатор type в значении pointerpressrealease

Подключает полифил, реализующий события pointerpress и pointerrelease. Полифил использует события Pointer Events.

Событие pointerpress

Генерируется по событию pointerdown.

Событие pointerrelease

Генерируется по событиям pointerup и pointercancel.