Плагины VcorpJS - краткий обзор и правила
Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.
Функции - плагины VcorpJS доступны только ПОСЛЕ инициализации объекта VcorpJS, подробности: Подключение и инициализация VcorpJS
Все плагины автоматически поддерживают сенсорные экраны мобильных устройств. Уровень поддержки touch-событий зависит от оборудования.
Автор убедился, что важное значение имеет мощность и возможности устройства (цена), независимо от установленной ОС.
Встроенные «заводские» браузеры могут некорректно эмулировать события мыши mousedown, mouseup, mousemove и т.д. параллельно с touchstart, touchend, touchmove, что может создавать некоторые проблемы с лишними срабатываниями обработчиков событий, так что приходится дополнительно отслеживать такие вещи.
SmartTV могут не поддерживать события move при нажатой кнопке, поэтому прямое перетаскивание объектов не всегда работает, это желательно учитывать.
Правила 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
В этот подраздел вынесены все плагины различного назначения, для которых нет отдельного раздела с подробным описанием.
Модальное окно сообщений - это окно с дескриптором 1 и особыми правилами, для его работы необходимы CSS-классы и некоторые функции оконной системы.
| Функция-плагин | Назначение |
|---|---|
| .dragDrop(...) | Перемещение произвольного объекта пользователем |
| .gDD() | Возвращает 0 или 1 - если происходит перемещение объекта |
| .sMenu(time, step, handler) | Устанавливает параметры для анимации меню и callbak - функцию |
| .iMenu(...) | Инициализация меню - указанное меню начинает работать согласно переданным параметрам |
| .gMenu(node) | Возвращает сылку на объект LI активного пункта меню node |
| .imgBlock(...) | Запускает анимированную ротацию изображений в блоке с указанными параметрами |
| .zoomImg(...) | Активизирует всплывание нового большого изображения с указанными параметрами |
| .uImg( [selector] [, node] ) | Обновляет список перелистываемых изображений в галерее |
| .createDialog(...) | Создаёт и открывает модальное диалоговое окно, возвращает node - ссылку на окно |
| .removeDialog([event]) | Удаляет модальное диалоговой окно с произвольным HTML-содержимым |
| .isDialog() | Проверка существания модального диалогового окна, возвращает true или false |
| .wAlert(...) | Создаёт и открывает модальное окно сообщения (дескриптор 1) с HTML-заголовком и содержимым |
| .isAlert() | Проверка существания окна сообщения, возвращает true или false |
| .wCallback(handler) | Задаёт callback - функцию handler в качестве обработчика операций с окнами (в том числе для окна сообщения 1) |
| .wDelete(1) | Удаляет окно сообщения (дескриптор 1) |
| .wHead(1, html) | Меняет HTML-содержимое залоговка окна сообщения |
| .wBody(1, html) | Меняет HTML-содержимое окна сообщения |
| .wSet(1,...) | Установка размеров и положения окна сообщения, а так-же кнопки закрытия и прозрачности |
| .wGet(1) | Возвращает объект с параметрами окна сообщения (дескриптор 1) |
| .spinner(...) | Контроль ввода целого положительного числа |
| .phone(...) | Контроль ввода телефонного номера |
| .uCheckeds(...) | Поиск и обновление указанных флажков-переключателей |
| .cbNew(...) | Создаёт новый контрол Combobox и возвращает его дескриптор |
| .cbChange(descriptor,...) | Обновление выпадающего списка указанного дескриптором комбобокса |
| .cbUpdate(...) | Поиск элементов класса .pb_combobox и инициализация |
| .cbCallback(handler) | Задаёт callbak - функцию handler по-умолчанию для всех комбобоксов |
| .cbGet(descriptor) | Возвращает текущее значение из поля input указанного комбобокса |
| .calendar(...) | Выводит календарь для навигации и выбора даты |
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.
Правила для callbak - функций
Многие функции VcorpJS принимают ссылку на callbak - функцию handler, это любая произвольная функция или текстовая строка с кодом функции.
Если callbak - функция передаётся как текстовая строка, то правила таковы:
- новая функция создаётся через конструктор Function()
- по-умолчанию параметр функции один - объект события (e) - но для многих плагинов количество, порядок и наименования параметров различаются, все параметры расписаны при описании конкретных функций
Правила передачи ссылок на объекты node
Функции VcorpJS принимают как прямую ссылку на объект node, так и текстовый id этого объекта, если он существует.
Правила обновления внутренних переменных окружения
Внутренние переменные окружения - это размеры экрана, страницы, положение мыши и т.д.
Если обработчики событий добавляются строго через метод спец-объекта .EH.add(), то при наступлении любого события, координаты мыши обновляются автоматически (если событие от пользователя), остальные переменные окружения тоже (если используются функции-плагины). Функция .uEnv([event]) может принудительно вызываться перед произвольным чтением переменных окружения, но как правило, эта функция нужна редко и не стоит ей злоупотреблять во-избежание тормозов рендеринга.