Оконная система VcorpJS - краткий обзор и правила

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Функции встроенной оконной системы VcorpJS доступны только ПОСЛЕ инициализации объекта VcorpJS, подробности: Подключение и инициализация VcorpJS

Оконная система VcorpJS позволяет не вникать в технические тонкости по реализации и организации управления окнами. Разработана в качестве максимально простой и гибкой альтенативы существующим фреймворкам и плагинам, позволяющим реализовать оконный интерфейс пользователя.

VcorpJS поддерживает до 48 «обычных» окон (дескрипторы 2-49), плюс модальное окно сообщения (дескриптор 1), плюс панель окон (дескриптор 0). Оконная система использует свои независимые дескрипторы и независимую анимацию, и никак не зависит от остальных функций-плагинов VcorpJS (кроме перетаскивания объектов).

Окна можно создавать, удалять, открывать и скрывать, перемещать и менять их размеры. Можно переключаться между окнами, выводя на верхний план то или иное окно (менять индекс перекрытия). Возможен показ кнопок управления окном для пользователя - закрытие и/или уничтожение, изменение размеров.

Автоматически поддерживаются сенсорные экраны мобильных устройств. Перемещение происходит всегда за заголовок, изменение размеров за правый нижний угол окна - в пределах веб-страницы или только в пределах видимой области окна браузера (зависит от CSS-position: absolute / fixed). При переключениях между окнами, а так же их закрытии и удалении, автоматически поддерживается порядок перекрытия окон (последние активные окна перекрывают все предыдущие). Окна автоматически меняют текущий zIndex от 101 до 149, для панели окон всегда 100, для модального окна сообщения всегда 299298 для полупрозрачного слоя).

Уровень поддержки touch-событий зависит от оборудования. Значение имеет мощность и возможности устройства (цена), независимо от установленной ОС.
Встроенные «заводские» браузеры иногда некорректно эмулируют события мыши mousedown, mouseup, mousemove и т.д. параллельно с touchstart, touchend, touchmove, что может в некоторых случаях (например, исчезание объекта по клику) создавать некоторые проблемы с лишними срабатываниями обработчиков событий (в том месте, где был объект), так что иногда (редко и некритично) приходится дополнительно отслеживать такие вещи (но владельцам дешёвых устройств, извините, не привыкать).
SmartTV могут не поддерживать события move при нажатой кнопке, поэтому такое перетаскивание объектов не всегда работает, это желательно учитывать.

Оконная система использует обязательные CSS-классы. Оконная система и её функции не имеют ничего общего с модальным диалоговым оком.

Правила 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

Оконная функцияНазначение
.wMax(number)Возвращает и устанавливает максимальное количество одновременно существующих окон (1-48)
.wPanelMove(boolean)Возвращает и устанавливает разрешение перемещать панель окон (0 или 1)
.wCallback(handler)Задаёт callback - функцию handler в качестве обработчика операций с окнами
.wSetting(...)Установка параметров по-умолчанию для всех новых окон
.wNew(...)Создаёт новое окно и возвращает descriptor (2-49)
.wDelete(descriptor [,animate])Удаляет окно по дескриптору с возможностью анимации
.wShow(descriptor)Выводит окно на передний план (index 1, zIndex 149)
.wHide(descriptor [,animate])Скрывает / сворачивает окно (index 0, zIndex 101)
.wHead(descriptor, html)Меняет HTML-содержимое залоговка окна
.wBody(descriptor, html)Меняет HTML-содержимое окна
.wSet(...)Установка размеров и положения окна, а так-же кнопок и прозрачности
.wGet(descriptor)Возвращает объект с параметрами указанного дескриптором окна
.wTop()Возвращает дескриптор активного окна 2 - 49 или undefined
.wClear()Уничтожает все окна (кроме диалогового окна, окна сообщения и панели окон)
.wAlert(...)Создаёт и открывает модальное окно сообщения (дескриптор 1) с HTML-заголовком и содержимым
.isAlert()Проверка существания окна сообщения, возвращает true или false

Правила для callbak - функций

Многие функции VcorpJS принимают ссылку на callbak - функцию handler, это любая произвольная функция или текстовая строка с кодом функции.

Если callbak - функция передаётся как текстовая строка, то правила таковы:

  • новая функция создаётся через конструктор Function()
  • по-умолчанию параметр функции один - объект события (e) - но для многих плагинов количество, порядок и наименования параметров различаются, все параметры расписаны при описании конкретных функций

Правила передачи ссылок на объекты node

Функции VcorpJS принимают как прямую ссылку на объект node, так и текстовый id этого объекта, если он существует.

Правила обновления внутренних переменных окружения

Внутренние переменные окружения - это размеры экрана, страницы, положение мыши и т.д.
Если обработчики событий добавляются строго через метод спец-объекта .EH.add(), то при наступлении любого события, координаты мыши обновляются автоматически (если событие от пользователя), остальные переменные окружения тоже (если используются функции-плагины). Функция .uEnv([event]) может принудительно вызываться перед произвольным чтением переменных окружения, но как правило, эта функция нужна редко и не стоит ей злоупотреблять во-избежание тормозов рендеринга.

Демо - блок с примерами использования функций

Визуальный пример использования ряда плагинов (отдельная веб-страница), в котором продемонстрированы следующие возможности:

  • объект управления событиями
  • комбинированные списки выбора (combobox)
  • анимационные меню
  • вывод модального окна сообщения
  • работа с окнами и панелью окон
  • работа с Гридами (в статичном блоке и в окнах)
  • работа плагина анимации
  • возможно, что-то ещё...

См. исходный код страницы. На странице находятся базовые CSS-стили и JavaScript-код управления страницей с комментариями
(на всякий случай, сорри за оформление кода страницы - страница предназначена для теста Гридов и скорости браузеров, а не для красоты кода).

Ссылка на страницу: Визуальный пример некоторых плагинов

  • «VcorpJS» - Главная страница раздела
  • Основные сведения
  • Подключение и инициализация VcorpJS
  • Типовой CSS-файл
  • Краткий обзор и правила, список всех функций.
  • Работа с функциями различного назначения
  • Функции общего назначения
  • Работа с классами и стилями
  • Работа с coockie
  • Работа со слоями (layers)
  • Управление событиями, спец-объект и обработчики
  • Работа со встроенными плагинами
  • Плагины VcorpJS - краткий обзор и правила
  • Перетаскивание объектов
  • Многоуровневые анимационные меню
  • Галереи изображений
  • Блоки ротации изображений
  • Модальное диалоговое окно
  • Модальное окно сообщения
  • Переключатели-флажки checkbox
  • Форматированный ввод данных
  • Поля ввода со списком выбора - combobox
  • Календарь (datepicker)
  • Оконная система
  • Оконная система - краткий обзор и правила
  • Настройка окон и оконная callback-функция
  • Функции работы с окнами
  • Работа с панелью окон
  • Табличный вывод данных Grid
  • Grid - краткий обзор и правила
  • Функции работы с Grid
  • Анимация объектов
  • Краткий обзор и правила анимации
  • Базовая функция анимации
  • Функции - обёртки анимации
  • POST запросы VcorpJS
  • POST запросы VcorpJS
  • Canvas и SVG - графика
  • Canvas - краткий обзор и правила
  • SVG - графики (charts)
  • Скачать vcorp_js_00_80.zip (35 Kb - js и css файлы)
  •  
  • Vcorp.ru - Главная страница сайта
  • Тест больших гридов в перемещаемых окнах
  • Тестирование 3D графики в браузерах
  • «Vcorp Generator» - Главная страница раздела
  • «Lazarus fpCEF3» - Главная страница раздела
  • Открывать окно навигации
    <<<
    Изменить высоту >>