Перейти к основному содержимому

dom-utils

DG.DomEvent

Класс для работы с событиями DOM.

Методы

МетодВозвращаетОписание
on( <HTMLElement> el, <String> types, <Function> fn, <Object> context? ) thisДобавляет метод fn к цепочкам обработчиков событий DOM, привязанных к элементу el. Вы также можете указать (изменить) контекст вызова обработчика (объект, на который ссылается ключевое слово this внутри обработчика). Также, можно указать несколько типов событий, разделив их пробелами (например: 'click dblclick').
on( <HTMLElement> el, <Object> eventMap, <Object> context? ) thisДобавляет набор пар 'тип/обработчик' в качестве обработчиков событий DOM (например: {click: onClick, mousemove: onMouseMove}).
off( <HTMLElement> el, <String> types, <Function> fn, <Object> context? ) thisУдаляет метод fn из цепочек обработчиков событий DOM, привязанных к элементу el. Если метод не указан, то удаляются все методы, привязанные на текущий момент. Замечание: если методу on передавался контекстный объект, этот же объект должен быть передан и методу off.
off( <HTMLElement> el, <Object> eventMap, <Object> context? ) thisУдаляет набор пар 'тип/обработчик' из цепочек обработчиков событий DOM.
stopPropagation( <DOMEvent> ev ) thisОстанавливает всплытие события к родительским элементам. Используется внутри функции-обработчика. Пример:
DG.DomEvent.on(div, 'click', function (ev) { DG.DomEvent.stopPropagation(ev); });
disableScrollPropagation( <HTMLElement> el ) thisДобавляет stopPropagation к событиям элемента 'mousewheel'.
disableClickPropagation( <HTMLElement> el ) thisДобавляет stopPropagation к событиям элемента 'click', 'doubleclick', 'mousedown' and 'touchstart'.
preventDefault( <DOMEvent> ev ) thisПредотвращает поведение DOM элемента по умолчанию (например, переход по ссылке указанной в свойстве href элемента a). Используется внутри функции-обработчика.
stop( <DOMEvent> ev ) thisВызывает одновременно stopPropagation и preventDefault. Используется внутри функции-обработчика.
getMousePosition( <DOMEvent> ev, <HTMLElement> container? ) PointВозвращает нормализованную позицию мыши из события DOM относительно контейнера или относительно всей страницы, если контейнер не указан.
getWheelDelta( <DOMEvent> ev ) NumberВозвращает нормализованную дельту колесика мыши, в виде вертикального смещения в пикселях (отрицательного, при прокрутке вниз), из события DOM mousewheel. События от устройств, которые не поддерживают точную прокрутку, отображаются на пиксельные координаты так, чтобы дельта прокрутки попадала в диапазон 50-60 пикселей.
addListener( ) thisПсевдоним для DG.DomEvent.on
removeListener( ) thisПсевдоним для DG.DomEvent.off

DG.DomUtil

Класс для работы с DOM деревом.

Методы

МетодВозвращаетОписание
get( <String|HTMLElement> id ) HTMLElementВозвращает элемент по его id, если параметром была передана строка, либо возвращает элемент непосредственно, если он был передан в качестве параметра.
getStyle( <HTMLElement> el, <String> styleAttrib ) StringВозвращает значение стилей элемента, установленных через атрибут sytle, включая вычисленные значения или значения, указанные с помощью CSS.
create( <String> tagName, <String> className?, <HTMLElement> container? ) HTMLElementСоздает HTML элемент tagName, устанавливает ему значение класса className и опционально добавляет его в элемент container.
remove( <HTMLElement> el ) Удаляет элемент el из элемента контейнера.
empty( <HTMLElement> el ) Удаляет все дочерние элементы из контейнера el.
toFront( <HTMLElement> el ) Перемещает элемент el в конец списка дочерних элементов, чтобы он отображался поверх остальных дочерних элементов контейнера.
toBack( <HTMLElement> el ) Перемещает элемент el в начало списка дочерних элементов, чтобы он отображался перед остальными дочерними элементами контейнера.
hasClass( <HTMLElement> el, <String> name ) BooleanВозвращает true, если элемент содержит класс name.
addClass( <HTMLElement> el, <String> name ) Добавляет класс name к элементу.
removeClass( <HTMLElement> el, <String> name ) Удаляет класс name из элемента.
setClass( <HTMLElement> el, <String> name ) Устанавливает класс у элемента.
getClass( <HTMLElement> el ) StringВозвращает значение класса элемента.
setOpacity( <HTMLElement> el, <Number> opacity ) Устанавливает прозрачность элемента. Значение opacity должно быть в диапазоне от 0.0 до 1.0.
testProp( <String[]> props ) String|falseПеребирает массив наименований стилей элемента и возвращает первое корректное наименование. Используется с префиксами производителей браузеров и стилями, вроде transform.
setTransform( <HTMLElement> el, <Point> offset, <Number> scale? ) Устанавливает стиль 3D CSS transform элемента el так, чтобы он был смещен на offset пикселей и увеличен/уменьшен в scale раз. Метод не работает, если браузер не поддерживает 3D CSS transforms.
setPosition( <HTMLElement> el, <Point> position ) Изменяет позиционирование элемента el, используя CSS translate или свойства top/left в зависимости от поддержки браузером.
getPosition( <HTMLElement> el ) PointВозвращает координаты элемента, ранее установленные методом setPosition.
disableTextSelection()Отключает возможность возникновения selectstart событий DOM, обычно сопутствующих выделению текстового фрагмента на странице. Влияет на поведение всего документа.
enableTextSelection()Включает возможность возникновения событий DOM selectstart, ранее отключенных DG.DomUtil.disableTextSelection.
disableImageDrag()Отключает возможность возникновения dragstart событий DOM, обычно сопутствующих перемещению изображения по странице.
enableImageDrag()Включает возможность возникновения событий DOM dragstart, ранее отключенных DG.DomUtil.disableImageDrag.
preventOutline( <HTMLElement> el ) Делает outline элемента el невидимой.
restoreOutline()Отменяет эффект DG.DomUtil.preventOutline.

Свойства

СвойствоТипОписание
TRANSFORMStringНазвание CSS свойства transform с учетом префикса производителя браузера (например, 'webkitTransform' для WebKit).
TRANSITIONStringНазвание CSS свойства transition с учетом префикса производителя браузера

DG.PosAnimation

Используется внутри библиотеки для анимаций перемещения, используя CSS3 transitions для современных браузеров и таймер для IE6-9.

var fx = new DG.PosAnimation();
fx.run(el, [300, 500], 0.5);

События

СобытиеДанныеОписание
startEventВызывается во время старта анимации.
stepEventВызывается (периодически) в процессе анимации.
endEventВызывается во время окончания анимации.

Методы

МетодВозвращаетОписание
run( <HTMLElement> el, <Point> newPos, <Number> duration?, <Number> easeLinearity?) Запускает анимацию перемещения элемента, полученного через аргумент метода. Дополнительно можно задать продолжительность анимации в секундах (по умолчанию 0.25) и функцию затухания (третий аргумент кубической кривой Безье, по умолчанию 0.5).
stop()Останавливает ранее запущенную анимацию.

Методы, унаследованные от Evented

DG.Draggable

Класс, с помощью которого можно сделать DOM элемент перетаскиваемым (включая поддержку тач-устройств). Работает только в том случае, если элемент был позиционирован с помошью DG.DomUtil.setPosition.

var draggable = new DG.Draggable(elementToDrag);
draggable.enable();

Свойства

СвойствоТипЗначение
>по умолчанию
Описание
clickToleranceNumber3Максимальное количество пикселей, на которое может сдвинуться мышь при нажатой кнопке, чтобы идентифицировать это событике как нажатие (а не начало перетаскивания).

События

СобытиеДанныеОписание
downEventВызывается перед началом перетаскивания.
dragstartEventВызывается в момент начала перетаскивания.
predragEventВызывается в процессе перетаскивания перед каждым обновлением позиции элемента.
dragendEventВызывается в момент окончания перетаскивания.

Методы

МетодВозвращаетОписание
enable()Включает возможность перетаскивания.
disable()Отключает возможность перетаскивания.

Методы, унаследованные от Evented