dom-utils
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