Работа с DOM
DG.DomEvent
Класс для работы с событиями DOM.
Методы
Метод | Возвращает | Описание |
---|---|---|
on(
|
this |
Добавляет метод fn к цепочкам обработчиков событий DOM, привязанных
к элементу el . Вы также можете указать (изменить) контекст вызова
обработчика (объект, на который ссылается ключевое слово this внутри
обработчика). Также, можно указать несколько типов событий, разделив их пробелами
(например: 'click dblclick' ). |
on(
|
this |
Добавляет набор пар 'тип/обработчик' в качестве обработчиков событий DOM
(например: {click: onClick, mousemove: onMouseMove} ). |
off(
|
this |
Удаляет метод fn из цепочек обработчиков событий DOM, привязанных
к элементу el . Если метод не указан, то удаляются все методы,
привязанные на текущий момент. Замечание: если методу on передавался
контекстный объект, этот же объект должен быть передан и методу off . |
off(
|
this |
Удаляет набор пар 'тип/обработчик' из цепочек обработчиков событий DOM. |
stopPropagation(
|
this |
Останавливает всплытие события к родительским элементам. Используется внутри
функции-обработчика. Пример:
|
disableScrollPropagation(
|
this |
Добавляет stopPropagation к событиям элемента 'mousewheel' . |
disableClickPropagation(
|
this |
Добавляет stopPropagation к событиям элемента 'click' ,
'doubleclick' , 'mousedown' and
'touchstart' . |
preventDefault(
|
this |
Предотвращает поведение DOM элемента по умолчанию (например, переход по ссылке указанной
в свойстве href элемента a ). Используется внутри функции-обработчика. |
stop(
|
this |
Вызывает одновременно stopPropagation и preventDefault .
Используется внутри функции-обработчика. |
getMousePosition(
|
Point |
Возвращает нормализованную позицию мыши из события DOM относительно контейнера или относительно всей страницы, если контейнер не указан. |
getWheelDelta(
|
Number |
Возвращает нормализованную дельту колесика мыши, в виде вертикального смещения
в пикселях (отрицательного, при прокрутке вниз), из события DOM mousewheel .
События от устройств, которые не поддерживают точную прокрутку, отображаются на пиксельные
координаты так, чтобы дельта прокрутки попадала в диапазон 50-60 пикселей. |
addListener(
|
this |
Псевдоним для DG.DomEvent.on |
removeListener(
|
this |
Псевдоним для DG.DomEvent.off |
DG.DomUtil
Класс для работы с DOM деревом.
Методы
Метод | Возвращает | Описание |
---|---|---|
get(
|
HTMLElement |
Возвращает элемент по его id, если параметром была передана строка, либо возвращает элемент непосредственно, если он был передан в качестве параметра. |
getStyle(
|
String |
Возвращает значение стилей элемента, установленных через атрибут sytle, включая вычисленные значения или значения, указанные с помощью CSS. |
create(
|
HTMLElement |
Создает HTML элемент tagName , устанавливает ему значение класса
className и опционально добавляет его в элемент container . |
remove(
|
|
Удаляет элемент el из элемента контейнера. |
empty(
|
|
Удаляет все дочерние элементы из контейнера el . |
toFront(
|
|
Перемещает элемент el в конец списка дочерних элементов, чтобы он
отображался поверх остальных дочерних элементов контейнера. |
toBack(
|
|
Перемещает элемент el в начало списка дочерних элементов, чтобы он
отображался перед остальными дочерними элементами контейнера. |
hasClass(
|
Boolean |
Возвращает true , если элемент содержит класс name . |
addClass(
|
|
Добавляет класс name к элементу. |
removeClass(
|
|
Удаляет класс name из элемента. |
setClass(
|
|
Устанавливает класс у элемента. |
getClass(
|
String |
Возвращает значение класса элемента. |
setOpacity(
|
|
Устанавливает прозрачность элемента. Значение opacity должно быть
в диапазоне от 0.0 до 1.0 . |
testProp(
|
String|false |
Перебирает массив наименований стилей элемента и возвращает первое корректное наименование.
Используется с префиксами производителей браузеров и стилями, вроде transform . |
setTransform(
|
|
Устанавливает стиль 3D CSS transform элемента el так, чтобы он был
смещен на offset пикселей и увеличен/уменьшен в scale раз.
Метод не работает, если браузер не поддерживает 3D CSS transforms. |
setPosition(
|
|
Изменяет позиционирование элемента el , используя CSS translate или свойства
top/left в зависимости от поддержки браузером. |
getPosition(
|
Point |
Возвращает координаты элемента, ранее установленные методом setPosition . |
disableTextSelection() |
|
Отключает возможность возникновения selectstart событий DOM, обычно сопутствующих
выделению текстового фрагмента на странице. Влияет на поведение всего документа. |
enableTextSelection() |
|
Включает возможность возникновения событий DOM selectstart , ранее отключенных
DG.DomUtil.disableTextSelection . |
disableImageDrag() |
|
Отключает возможность возникновения dragstart событий DOM, обычно сопутствующих
перемещению изображения по странице. |
enableImageDrag() |
|
Включает возможность возникновения событий DOM dragstart , ранее отключенных
DG.DomUtil.disableImageDrag . |
preventOutline(
|
|
Делает outline
элемента el невидимой. |
restoreOutline() |
|
Отменяет эффект DG.DomUtil.preventOutline . |
Свойства
Свойство | Тип | Описание |
---|---|---|
TRANSFORM |
String |
Название CSS свойства transform с учетом префикса производителя браузера
(например, 'webkitTransform' для WebKit). |
TRANSITION |
String |
Название CSS свойства transition с учетом префикса производителя браузера |
DG.PosAnimation
Используется внутри библиотеки для анимаций перемещения, используя CSS3 transitions для современных браузеров и таймер для IE6-9.
var fx = new DG.PosAnimation();
fx.run(el, [300, 500], 0.5);
События
Событие | Данные | Описание |
---|---|---|
start |
Event |
Вызывается во время старта анимации. |
step |
Event |
Вызывается (периодически) в процессе анимации. |
end |
Event |
Вызывается во время окончания анимации. |
Методы
Метод | Возвращает | Описание |
---|---|---|
run(
|
|
Запускает анимацию перемещения элемента, полученного через аргумент метода.
Дополнительно можно задать продолжительность анимации в секундах
(по умолчанию 0.25 ) и функцию затухания
(третий аргумент кубической кривой Безье,
по умолчанию 0.5 ). |
stop() |
|
Останавливает ранее запущенную анимацию. |
Методы, унаследованные от Evented
DG.Draggable
Класс, с помощью которого можно сделать DOM элемент перетаскиваемым (включая поддержку тач-устройств). Работает только в том случае, если элемент был позиционирован с помошью DG.DomUtil.setPosition.
var draggable = new DG.Draggable(elementToDrag);
draggable.enable();
Свойства
Свойство | Тип | Значение по умолчанию |
Описание |
---|---|---|---|
clickTolerance |
Number |
3 |
Максимальное количество пикселей, на которое может сдвинуться мышь при нажатой кнопке, чтобы идентифицировать это событике как нажатие (а не начало перетаскивания). |
События
Событие | Данные | Описание |
---|---|---|
down |
Event |
Вызывается перед началом перетаскивания. |
dragstart |
Event |
Вызывается в момент начала перетаскивания. |
predrag |
Event |
Вызывается в процессе перетаскивания перед каждым обновлением позиции элемента. |
dragend |
Event |
Вызывается в момент окончания перетаскивания. |
Методы
Метод | Возвращает | Описание |
---|---|---|
enable() |
|
Включает возможность перетаскивания. |
disable() |
|
Отключает возможность перетаскивания. |
Методы, унаследованные от Evented