Работа с DOM

Класс DG.DomEvent

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

Методы

Метод Возвращает Описание
addListener( <HTMLElement> el, <String> type, <Function> fn, <Object> context? ) this Подписывает обработчик fn на DOM событие определенного типа. Ключевое слово this внутри обработчика будет указывать на context, или на элемент на котором произошло событие, если контекст не задан.
removeListener( <HTMLElement> el, <String> type, <Function> fn ) this Отписывает ранее подписанный обработчик.
stopPropagation( <DOMEvent> e ) this Останавливает всплытие события к родительским элементам. Используется внутри функции-обработчика: DG.DomEvent.addListener(div, 'click', function (e) { DG.DomEvent.stopPropagation(e); });
preventDefault( <DOMEvent> e ) this Предотвращает поведение DOM элемента по умолчанию (например, переход по ссылке указанной в свойстве href элемента a). Используется внутри функции-обработчика.
stop( <DOMEvent> e ) this Вызывает одновременно stopPropagation и preventDefault.
disableClickPropagation( <HTMLElement> el ) this Добавляет stopPropagation к DOM элементу для событий 'click', 'doubleclick', 'mousedown' и 'touchstart'.
getMousePosition( <DOMEvent> e, <HTMLElement> container? ) Point Возвращает позицию мышки из DOM события относительно контейнера или относительно всей страницы, если контейнер не указан.
getWheelDelta( <DOMEvent> e ) Number Возвращает дельту колесика мышки из DOM события mousewheel.

Класс DG.DomUtil

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

Методы

Метод Возвращает Описание
get( <String или HTMLElement> id ) HTMLElement Возвращает элемент по его id, если параметром была передана строка, либо возвращает тот же элемент, если он был передан в качестве параметра.
getStyle( <HTMLElement> el, <String> style ) String Возвращает значение стиля элемента, включая рассчитанные значения или значения указанные с помощью CSS.
create( <String> tagName, <String> className, <HTMLElement> container? ) HTMLElement Создает элемент tagName, устанавливает ему значение класса className и опционально добавляет его в элемент container.
disableTextSelection() - Отключает возможность выделения текста, например, во время перетаскивания.
enableTextSelection() - Включает возможность выделения текста.
hasClass( <HTMLElement> el, <String> name ) Boolean Возвращает true, если элемент содержит класс name.
addClass( <HTMLElement> el, <String> name ) - Добавляет класс name к элементу.
removeClass( <HTMLElement> el, <String> name ) - Удаляет класс name из элемента.
setOpacity( <HTMLElement> el, <Number> value ) - Устанавливает прозрачность элемента (включая поддержку старых IE). Значение должно быть от 0 до 1.
testProp( <String[]> props ) String или false Обходит массив названий стилей и возвращает первое имя, которое является корректным для текущего браузера. Если такого нет, тогда будет возвращено false. Удобно для стилей с префиксами производителей браузеров, например transform.
setPosition( <HTMLElement> el, <Point> point, <Boolean> disable3D? ) - Устанавливает позицию элемента в координаты point, используя CSS translate или свойства top и left, в зависимости от браузера. Принудительно использует позиционирование с помощью top и left, если disable3D установлено в true.
getPosition( <HTMLElement> el ) Point Возвращает координаты элемента, который ранее был спозиционирован с помощью метода setPosition.

Свойства

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

Класс DG.PosAnimation

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

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

Конструктор

Конструктор Использование Описание
DG.PosAnimation() new DG.PosAnimation() Создает объект PosAnimation.

Методы

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

События

Вы можете подписаться на следующие события используя эти методы:

Событие Данные Описание
start Event Вызывается во время старта анимации.
step Event Вызывается в процессе анимации.
end Event Вызывается во время окончания анимации.

Класс DG.Draggable

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

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

Конструктор

Конструктор Использование Описание
DG.Draggable( <HTMLElement> element, <HTMLElement> dragHandle? ) new DG.Draggable(…) Создает объект, с помощью которого можно двигать элемент element во время перетаскивания элемента dragHandle (по умолчанию dragHandle является тем же элементом, что и element).

События

Вы можете подписаться на следующие события используя эти методы:

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

Методы

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