UI виджеты Context и Popup

Context - это виджет во всплывающем окне, скрытый по умолчанию. Он появляется, когда пользователи нажимают на правую кнопку мыши. Он может содержать любой HTML код или Webix компонент. JavaScript Popup - это виджет, который позволяет показывать уведомления. Он похож функциональностью на Webix Window, однако, в отличие от Window, он скрывается по клику на любую другую область приложения.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Оба виджета - это всплывающие окна, но они выполняют разные задачи. Если вы хотите создать уведомления, используйте виджет Popup. По клику на любую область экрана вне Popup, он исчезнет.

Виджет Context может включать информацию или функциональность, которая может понадобиться несколько раз. Например, по клику правой кнопкой мыши, вы можете показывать краткую информацию о том, как работать с приложением.

Кроме того, вы можете поместить в Context наиболее часто используемые контролы. Например, если вы хотите создать веб-приложение для работы с графикой, в Context можно добавить Colorpicker.

Context

Виджет Context появляется на экране по клику на правую кнопку мыши. Он может содержать любой HTML элемент или Webix компонент. Вы можете использовать его, чтобы показывать пользователям дополнительную информацию или давать быстрый доступ к часто используемым действиям.

Right click here

Popup

Модальный/немодальный Popup

У Popup есть два состояния - modal и modeless. В состоянии modal пользователи не могут закрыть Popup, не нажав на кнопку в нем или не выполнив какое-нибудь другое необходимое действие с ним. Modeless Popup исчезает, если кликнуть вне его.

Размер и позиционирование

При работе с виджетом Popup, вам нужно определить его размеры и положение на экране. По умолчанию, этот компонент появится в верхнем левом углу. С Webix вы можете определять позицию Popup относительно верхней и нижней границ экрана или относительно любого HTML элемента или виджета Webix.