Работа с DOM

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.

Свойства

Свойство Тип Описание
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( <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();

Свойства

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

События

Событие Данные Описание
down Event Вызывается перед началом перетаскивания.
dragstart Event Вызывается в момент начала перетаскивания.
predrag Event Вызывается в процессе перетаскивания перед каждым обновлением позиции элемента.
dragend Event Вызывается в момент окончания перетаскивания.

Методы

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

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