Краткий обзор и правила, список всех функций VcorpJS
Основные правила VcorpJS
После создания объекта VcorpJS, до его инициализации доступны часть свойств и функций (функции-плагины и свойство .B доступны только после инициализации).
Список свойств, доступных ДО и после инициализации VcorpJS:
| Свойство | Назначение |
|---|---|
| .W | Ссылка на контекст, переданный при создании VcorpJS (по-умолчанию window) |
| .WP | Ссылка на родитель W.parent |
| .WT | W.top |
| .WF | W.frames |
| .D | W.document |
| .OS | Операционная система navigator.platform.toLowerCase() |
Список свойств, доступных ПОСЛЕ инициализации VcorpJS:
| Свойство | Назначение |
|---|---|
| .B | Ссылка на body (.W.D.body) |
Правила для callback - функций
Многие функции VcorpJS принимают ссылку на callback-функцию handler, это любая произвольная функция или текстовая строка с кодом функции.
Если callback функция передаётся как текстовая строка, то правила таковы:
- новая функция создаётся через конструктор Function()
- по-умолчанию параметр функции один - объект события (e) - но для многих плагинов количество, порядок и наименования параметров различаются, все параметры расписаны при описании конкретных функций
Правила передачи ссылок на объекты node
Функции VcorpJS принимают как прямую ссылку на объект node, так и текстовый id этого объекта, если он существует.
Правила обновления внутренних переменных окружения
Внутренние переменные окружения - это размеры экрана, страницы, положение мыши и т.д.
Если обработчики событий добавляются строго через метод спец-объекта .EH.add(), то при наступлении любого события, координаты мыши обновляются автоматически (если событие от пользователя), остальные переменные окружения тоже (если используются функции-плагины). Функция .uEnv([event]) может принудительно вызываться перед произвольным чтением переменных окружения, но как правило, эта функция нужна редко и не стоит ей злоупотреблять во-избежание тормозов рендеринга.
Правила zIndex для плагинов VcorpJS
Рекомендуется внимательно следить за значением zIndex - если хотите, чтобы слои не перекрывали необходимые элементы.
Плагины VcorpJS используют следующие диапазоны zIndex:
- оконная система от 101 до 149 (панель окон 100)
- всплывающие фото от 201 до 209
- календарь 298 для слоя и окна
- модальное диалоговое окно - 251 для слоя и минимум 251 для окна
- модальное окно сообщения - 298 для слоя и 299 для окна
- при перетаскивании объектов они имеют zIndex: 250 для изображений и обычных окон, 297 или выше для других перемещаемых объектов (зависит от исходного zIndex).
Автор, например, использует модальные диалоговые окна для форм обратной связи, а при AJAX-запросах отправки содержимого форм - создание слоя с zIndex равным 260 или 298 и сообщением об ожидании ответа. В процессе AJAX-запроса может появиться модальное окно сообщения поверх слоя и диалогового окна.
Список функций, доступных ДО и после инициализации VcorpJS
Браузер (точное определение не гарантировано)
| Функция | Назначение |
|---|---|
| .isIE() | Возвращает 0 (если не IE) или номер версии IE |
| .isOPERA12() | Возвращает 0 (если не Opera<=12) 1 (если Opera<=12) |
| .isFF() | Возвращает 0 (если не FireFox) 1 (если FireFox) |
| .isSAFARI() | Возвращает 0 (если не Safari) 1 (если Safari) |
| .isCHROME() | Возвращает 0 (если не Chrome) 1 (если Chrome) |
| .isOTHER() | Возвращает 0 (если один из тех, что выше) 1 (если не определён) |
| .isBrowserName() | Возвращает строку с названием браузера - один из вариантов: "ie" | "edge" | "opera" | "firefox" | "safari" | "chrome" | "other" |
Прочие функции
| Функция | Назначение |
|---|---|
| .ready(handler) | Вызов функции handler по готовности DOM (событию DOMContentLoaded). После инициализации игнорируется. |
| .sRAF(boolean) | Если boolean==true, то задействовать механизм requestAnimationFrame, иначе отменить. |
| .isTOUCH() | Возвращает 0 (если нет touch-событий) или 1 (поддержка сенсорного экрана) |
| .isPageOrientation() .isPO() | 0 - по-умолчанию. Внутренние переменные окружения меняются через 0.1сек. после изменения ориентации мобильного устройства. |
| .httpNew() | Возвращает новый созданный объект XMLHttpRequest |
| .httpPost(...) | POST - запрос на сервер |
| .trim(string) | Удаление пробельных символов по краям строки |
| .ltrim(string) | Удаление пробельных символов с начала строки |
| .rtrim(string) | Удаление пробельных символов в конце строки |
| .reverse(string) | Реверс строки |
| .gCC(number) | Возвращает строковый символ кода number ( String.fromCharCode(number) ) |
| .isArray(object) | Возвращает true или false (проверка объекта на массив) |
| .isDate(object) | Возвращает true или false (проверка объекта на дату) |
| .gCookie(name) | Возвращает значение cookie с именем name или false |
| .sCookie(name, value [,object]) | Уcтанавливает cookie |
| .dCookie(name [,path, domain]) | Удаляет cookie |
| .sLS(name, value) | localStorage - запись строкового значения value под именем name |
| .gLS(name) | localStorage - чтение строкового значения под именем name |
| .loadJs(url [,handler]) | Подгрузка внешнего JavaScript - файла |
| .addCss(stringCSS [,descriptor]) | Создание нового тега style с содержимым строки stringCSS |
| .removeCss([descriptor]) | Удаление тега (тегов) style |
| .isPointInsidePolygon(array, {x,y}) .isPIP(array of objects {x,y}, {x,y}) | Определение принадлежности точки {x,y} к площади произвольного многоугольника. |
| .gChart(object, array [, flag]) | Создаёт и возвращает в виде текстовой строки SVG-график заданного вида. |
Функции ниже могут не работать или вызывать ошибку, если DOM ещё не полностью готов к работе или node не найден.
node - это ссылка на объект или текстовый id объекта.
| Функция | Назначение |
|---|---|
| .id(node) | Возвращает ссылку на объект или undefined |
| .gVersion() | Возвращает версию VcorpJS в виде текстовой строки. |
| .gPos(node) | Чтение позиции курсора в редактируемой области node - возвращает номер позиции или false (фокус устанавливается на объект node) |
| .sPos(node, number) | Установка позиции курсора в редактируемой области node (фокус устанавливается на объект node) |
| .qSA(string [, object]) | аналог object.querySelectorAll(string) |
| .qS(string [, object]) | аналог object.querySelector(string) |
| .changeSC(...) | Изменение стилей |
| .gStyle(node, string) | Возвращает значение стиля string объекта node, наименование стиля как в CSS (через тире) или как в JS |
| .sOpacity(node, number) | Изменение opacity объекта node (number от 0 до 1 - кроссбраузерно) |
| .init() | Ручная инициализация объекта VcorpJS |
| .EH | Объект для работы с обработчиками событий (.EH.add(node, eName, handler) и .EH.remove(node, eName, handler) ) |
| .addEH(eName, handler, arrayNodes) | Установка обработчика handler события eName для группы объектов arrayNodes |
| .removeEH(eName, handler, arrayNodes) | Удаление обработчика handler события eName у группы объектов arrayNodes |
Список функций, доступных только ПОСЛЕ инициализации VcorpJS
| Функция | Назначение |
|---|---|
| .uEnv([event]) | Обновить принудительно все внутренние переменные окружения (функции ниже возвращают текущие внутренние значения) |
| .uMouseXY(event) .uMXY(event) | Обновить принудительно только внутренние координаты мыши (если событие от пользователя). Эти функции не нужны, если обработчики событий добавляются через объект .EH или функцию .addEH() |
| .gMouseX() .gMX() | Возвращает внутреннюю текущую координату X мыши |
| .gMouseY() .gMY() | Возвращает внутреннюю текущую координату Y мыши |
| .gAvailWidth() .gAW() | Возвращает ширину экрана screen.availWidth |
| .gAvailHeight() .gAH() | Возвращает высоту экрана screen.availHeight |
| .gClientWidth() .gCW() | Возвращает ширину окна браузера |
| .gClientHeight() .gCH() | Возвращает высоту окна браузера |
| .gPageWidth() .gPW() | Возвращает ширину документа (веб-страницы) |
| .gPageHeight() .gPH() | Возвращает высоту документа (веб-страницы) |
| .gPageScrollTop() .gPST() | Возвращает cдвиг видимой части документа (веб-страницы) относительно левого верхнего угла документа |
| .gPageScrollLeft() .gPSL() | Возвращает cдвиг видимой части документа (веб-страницы) относительно левого верхнего угла документа |
| .gOffset(node) | Возвращает объект {left:number, top:number} координат левого верхнего угла элемента node относительно начала документа |
| .addLayer(...) | Создаёт слой |
| .removeLayer(...) | Удаляет слой |
| .animate(...) | Анимация произвольного HTML-элемента. Возвращает дескриптор анимации |
| .aWrap(...) | Обёртка над функцией animate() - более простые короткие параметры |
| .aOpacity(...) | Обёртка - плавное изменение прозрачности HTML-элемента |
| .aHeight(...) | Обёртка - плавное изменение высоты HTML-элемента |
| .aWidth(...) | Обёртка - плавное изменение ширины HTML-элемента |
| .aClear(descriptor) | Принудительный останов анимации по дескриптору |
| .dragDrop(...) | Перемещение произвольного объекта пользователем |
| .gDD() | Возвращает 0 или 1 - если происходит перемещение объекта |
| .wMax(number) | Возвращает и устанавливает максимальное количество одновременно существующих окон (1-48) |
| .wPanelMove(boolean) | Возвращает и устанавливает разрешение перемещать панель окон (0 или 1) |
| .wCallback(handler) | Задаёт callback - функцию handler в качестве обработчика операций с окнами |
| .wSetting(...) | Установка параметров по-умолчанию для всех новых окон |
| .wNew(...) | Создаёт новое окно и возвращает descriptor |
| .wDelete(desc [,animate]) | Удаляет окно с возможностью анимации |
| .wShow(descriptor) | Выводит окно на передний план |
| .wHide(desc [,animate]) | Скрывает окно (сворачивает) |
| .wHead(descriptor, html) | Меняет залоговок окна |
| .wBody(descriptor, html) | Меняет содержимое окна |
| .wSet(...) | Установка размеров и положения окна, а так-же кнопок и прозрачности |
| .wGet(descriptor) | Возвращает объект с параметрами указанного дескриптором окна |
| .wTop() | Возвращает дескриптор активного окна 2 - 49 или undefined |
| .wClear() | Уничтожает все окна (кроме диалогового окна, окна сообщения и панели окон) |
| .wAlert(...) | Создаёт и открывает модальное окно сообщения |
| .isAlert() | Проверка существания окна сообщения, возвращает true или false |
| .createDialog(...) | Создаёт и открывает модальное диалоговое окно, возвращает node - ссылку на окно |
| .removeDialog([event]) | Удаляет модальное диалоговой окно |
| .isDialog() | Проверка существания модального диалогового окна, возвращает true или false |
| .spinner(...) | Контроль ввода целого положительного числа |
| .phone(...) | Контроль ввода телефонного номера |
| .calendar(...) | Выводит календарь для навигации и выбора даты |
| .sMenu(time, step, handler) | Устанавливает параметры для анимации меню и callbak - функцию |
| .iMenu(...) | Инициализация меню с активизацией |
| .gMenu(node) | Возвращает сылку на объект LI активного пункта меню node |
| .imgBlock(...) | Запускает анимированную ротацию изображений в блоке |
| .zoomImg(...) | Активизирует всплывание нового большого изображения с указанными параметрами |
| .uImg( [selector] [, node] ) | Обновляет список перелистываемых изображений в галерее |
| .uCheckeds(...) | Поиск и обновление указанных флажков-переключателей |
| .cbNew(...) | Создаёт новый контрол Combobox и возвращает его дескриптор |
| .cbChange(descriptor,...) | Обновление выпадающего списка указанного дескриптором комбобокса |
| .cbUpdate(...) | Поиск элементов класса .pb_combobox и инициализация |
| .cbCallback(handler) | Задаёт callbak - функцию handler по-умолчанию для всех комбобоксов |
| .cbGet(descriptor) | Возвращает текущее значение из поля input указанного комбобокса |
| .gridNew(...) | Создаёт новый Грид и возвращает descriptor |
| .gridData(descriptor, array) | Загрузка новых данных в Грид |
| .gridStyle(descriptor, ...) | Смена стилей (темы) Грида |
| .gridDelete(descriptor) | Удаление Грида |
| .cvNew(...) | Создаёт новый объект Canvas и возвращает ссылку на него |
| .cvDraw(...) | Canvas - рисование контура с заполнением или без |
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.