Работа с 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