ui.contextmenu

контекстное меню.

Контекстное меню открывается, когда пользователь кликает правой кнопкой мыши по элементу интерфейса. Вы можете добавлять сколько угодно вложенных опций в меню. Подробнее в описательной документации.

Инициализация

HTML .

<!--элемент интерфейса, по клику на который откроется контекстное меню-->
<div id="areaA" style=" background-color:#ffffbb; width:500px; height:300px;"></div>

JS .

var contextmenu = webix.ui({
    view:"contextmenu",
    data:[
        {
            value:"Перевести...", submenu:[ 
            "English", 
            "Русский",
            "Deutsch"
            ]
        },
        { value:"Info" }
    ],
    master:"areaA"
});

С чего начать

Methods
add добавляет элемент в DataStore
addCss применяет CSS-класс к элементу компонента
adjust подстраивает размеры компонента под размеры HTML-контейнера
attachEvent задает обработчик внутреннего события компонента
attachTo добавляет контекстное меню к компоненту Webix
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
clearAll удаляет все элементы из компонента
clearCss удалить CSS-класс у всех элементов
clearValidation удаляет из компонента все примененные после валидации стили и маркеры
copy копирует элемент в тот же или другой объект
count возвращает количество элементов, отображаемых в компоненте на момент вызова
customize переопределяет свойство "type"
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
disableItem блокирует элемент
enable делает активным ранее заблокированный компонент
enableItem отменяет блокировку элемента
exists проверяет, существует ли элемент с указанным ID
filter фильтрует данные в компоненте
find возвращает все элементы данных, соответствующие заданному критерию, или только первый из элементов
getBody возвращает компонент, который поместили в основную часть окна
getChildViews возвращает внутренние компоненты
getContext возвращает элемент, для которого открывается контекстное меню
getFirstId возвращает ID первого элемента
getFormView возвращает объект формы, которой принадлежит компонент
getHead возвращает объект хедера окна
getIdByIndex возвращает id элемента по указанному индексу
getIndexById возвращает индекс элемента по заданному ID
getItem возвращает объект элемента данных по заданному ID
getItemNode возвращает HTML-контейнер элемента данных компонента
getLastId возвращает ID последнего элемента
getMenu возвращает объект menu/submenu, в котором находится указанная опция
getMenuItem возвращает опцию submenu
getNextId возвращает ID элемента, расположенного после указанного элемента на заданной относительной позиции
getNode возвращает HTML-элемент компонента
getPage возвращает номер видимой в данный момент страницы для компонентов с включенным пейджингом
getPager возвращает объект пейджера, связанный с компонентом
getParentView возвращает родительский компонент
getPrevId возвращает ID элемента, расположенного до указанного элемента на заданной относительной позиции
getScrollState возвращает позицию скролла
getSelectedId возвращает id выбранного элемента(ов)
getSelectedItem возвращает выбранный элемент данных
getSubMenu возвращает объект submenu
getTopMenu возвращает объект меню
getTopParentView возвращает самого верхнего родителя
getVisibleCount возвращает число элементов, которые видны на странице при текущей высоте компонента
hasCss проверяет есть ли у элемента указанный CSS-класс
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
hideItem скрывает опцию меню
isEnabled проверяет, активен или заблокирован компонент
isItemEnabled проверяет, заблокирован ли элемент
isSelected проверяет, выбран указанный элемент или нет
isVisible проверяет, виден ли компонент
load загружает данные из внешнего источника данных
loadNext отправляет запрос на загрузку определённого количества строк данных (до конца имеющихся данных или до определённой позиции)
locate получает id элемента по связанному с ним HTML событию
mapEvent направляет события от одного компонента к другому
move перемещает выбранный элемент на новую позицию
moveBottom перемещает указанный элемент в конец списка элементов данных
moveDown увеличивает индекс элемента и перемещает элемент на новую позицию
moveSelection перемещает выделение в указанном направлении
moveTop перемещает указанный элемент на первую позицию
moveUp уменьшает индекс элемента и перемещает элемент на новую позицию
parse загружает данные, доступные на клиенте
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
refresh перерисовывает компонент или один из его элементов
remove удаляет указанный элемент(ы) из DataStore
removeCss удаляет CSS-класс у элемента компонента
render отрисовывает указанный элемент или весь компонент
resize перерисовывает компонент после изменения размеров
resizeChildren перерисовывает все вложенные компоненты
scrollTo прокручивает содержимое компонента до определенной позиции
select выбирает указанный элемент(ы)
selectAll выбирает все элементы или элементы из указанного диапазона id
serialize сериализует данные в массив JSON объектов
setContext позволяет задать компонент, для которого будет открываться контекстное меню / окно
setPage переключает пейджер на указанную страницу
setPosition задает положение окна на экране (в пикселях)
show делает компонент видимым
showItem прокручивает содержимое компонента до нужного элемента
sizeToContent подстраивает размеры меню и его опций под содержимое
sort сортирует DataStore
sync позволяет синхронизировать данные (все или часть) двух компонентов или DataCollection
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
unselect убирает выделение с указанного элемента
unselectAll убирает выделение со всех элементов
updateItem обновляет элемент данных (изменяет его поля)
validate проверяет один элемент или все данные
waitSave позволяет определить момент, когда операции над данными были сохранены на сервер
Events
onAfterAdd срабатывает после добавления элемента в DataStore
onAfterContextMenu срабатывает после вызова контекстного меню
onAfterDelete срабатывает после удаления элемента
onAfterDrop срабатывает после того, как элемент перетащили на цель
onAfterLoad срабатывает после завершения загрузки данных
onAfterRender происходит сразу после рендеринга компонента
onAfterScroll срабатывает после прокрутки содержимого компонента webix
onAfterSelect срабатывает после выбора элемента
onAfterSort срабатывает после сортировки данных
onBeforeAdd срабатывает перед добавлением элемента в DataStore
onBeforeContextMenu срабатывает перед вызовом контекстного меню
onBeforeDelete срабатывает перед удалением элемента
onBeforeDrag срабатывает перед тем, как курсор переместили на элемент и нажали левую кнопку мыши
onBeforeDragIn срабатывает перед тем, как элемент будет перемещён в зону над целью перетаскивания
onBeforeDrop срабатывает перед тем, как элемент помещён на цель перетаскивания
onBeforeDropOut срабатывает перед тем, как элемент перемещен на цель вне компонента, в котором элемент находился
onBeforeLoad запускается непосредственно перед началом загрузки данных
onBeforeRender происходит перед рендерингом компонента
onBeforeSelect срабатывает перед выбором элемента
onBeforeShow срабатывает после вызова метода show() у компонентов window и popup перед тем, как окно появится
onBeforeSort срабатывает перед сортировкой данных
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onBlur срабатывает при смещении фокуса за пределы компонента
onDataRequest срабатывает, когда данные с сервера запрашиваются для линейных данных (List, DataTable, DataView и т.д.) для динамической загрузки данных
onDataUpdate срабатывает при обновлении элемента данных
onDestruct происходит, когда компонент был разрушен деструктором
onDragOut срабатывает, когда элемент перемещён за пределы цели перетаскивания
onEnter срабатывает после нажатия клавиши Enter
onFocus срабатывает после смещения фокуса на компонент
onHide срабатывает, когда окно скрылось
onItemClick срабатывает после клика по элементу компонента
onItemDblClick срабатывает после двойного клика по элементу компонента
onItemRender срабатывает при перерисовке элементов с заданным пользователем темплейтом
onKeyPress срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус)
onLoadError срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера)
onLongTouch срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном)
onMenuItemClick срабатывает, когда пользователь кликнет по опции меню
onMouseMove срабатывает при наведении мыши на указанный компонент
onMouseMoving срабатывает при наведении указателя мыши на компонент
onMouseOut срабатывает, когда курсор мыши убирается с указанного элемента
onPaste срабатывает, когда включён clipboard и пользователь нажимает сочетание клавиш CTRL+V
onSelectChange срабатывает после изменения выбора
onShow срабатывает, когда окно появилось
onSwipeX срабатывает по горизонтальному свайпу
onSwipeY срабатывает по вертикальному свайпу
onTabFocus срабатывает после смещения фокуса на другой компонент с помощью клавиши Tab
onTimedKeyPress срабатывает через некоторое время после нажатия клавиши в текстовом поле
onTouchEnd срабатывает после завершения события touch
onTouchMove срабатывает по время движения пальца по сенсорному экрану
onTouchStart срабатывает после touch-события в компоненте webix
onValidationError срабатывает, если данные не прошли валидацию после их загрузки/редактирования/добавления
onValidationSuccess срабатывает, если данные успешно прошли прошли валидацию после их загрузки/редактирования/добавления
onViewMove срабатывает, когда компонент перетаскивают
onViewMoveEnd срабатывает, когда компонент перестает двигаться
onViewResize срабатывает при изменении размера компонента
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
autofit адаптирует размеры окна под размеры HTML-контейнера, в котором окно инициализировали
autofocus автоматически перемещает фокус на содержимое окна при его появлении
autoheight подстраивает высоту компонента под суммарную высоту всех его элементов
autowidth подстраивает ширину компонента под суммарную ширину всех его элементов
body основная часть окна, в которой могут быть любые компоненты или HTML
borderless скрывает или показывает границы компонента
click задает обработчик для кликов по кнопке
clipboard включить / выключить поддержку буфера обмена на десктопных устройствах
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
data данные для компонента (массив, типизированный массив, XML или CSV)
datathrottle устанавливает промежуток времени между запросами данных (период времени между завершением одного запроса и началом следующего запроса)
datatype тип загружаемых данных
disabled блокирует или разблокирует компонент
drag включает или отключает драг-н-дроп для компонента
dragscroll включает автоматическую прокрутку компонента во время перетаскивания его элементов
escHide переключает поведение "спрятать при нажатии Esc"
externalData позволяет переопределить логику перемещения элементов компонента
gravity задает удельный (относительный) размер компонента
head задает хедер для окна
headHeight задает высоту хедера окна
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
item алиас свойства type
keyPressTimeout задержка между нажатием клавиши и обработчиком
layout определяет тип списка (вертикальный или горизонтальный)
left задает положение окна на экране (по горизонтали)
master ID мастер-компонента окна (свойство только для чтения)
maxHeight определяет максимальную высоту компонента
maxWidth определяет максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
modal делает окно модальным
mouseEventDelay задержка между реальным действием мыши и вызовом связанных событий
move делает компонент перетаскиваемым
multiselect включает режим выбора нескольких элементов
navigation активирует навигацию с помощью клавиатуры
on позволяет присоединять обработчики к внутренним событиям компонента
onClick присоединяет обработчик клика для частей компонента с указанным классом CSS
onContext свойство, используемое для определения пользовательских обработчиков контекстного клика (клика правой кнопкой мыши) для элементов в ячейках DataTable
onDblClick обрабатывает двойные клики по областям и элементам компонентов (по названию их CSS-классов)
onMouseMove обрабатывает событие mousemove для элементов компонента с указанным классом CSS
openAction изменяет действие, по которому разворачиваются опции меню, на "click"
padding задаёт внутренние отступы для всех четырёх сторон виджета
pager задает настройки для пейджера или привязывает пейджер по его ID к компоненту
point добавляет стрелку окну или убирает ее
position задает положение окна на экране
prerender вызывает отрисовку всех элементов данных
ready обработчик, который вызывается сразу после того, как компонент полностью инициализирован
relative задает положение окно относительно его мастер-компонента
removeMissed определяет что должно происходить с элементами данных при перезагрузке
resize позволяет изменить размер компонента
rules задает правила для валидации
save определяет URL для сохранения данных
scheme определяет схему для обработки данных
scroll включает/отключает полосу прокрутки
scrollSpeed время, в течение которого компонент прокручивается до указанной позиции (в миллисекундах)
select включает/отключает выбор одного или нескольких элементов в компонентах
subMenuPos выравнивает submenu относительно верхнего уровня
submenuConfig задает настройки для submenu
template темплейт, который определяет вид и содержимое элементов компонента
templateCopy задаёт template, в соответствии с которым данные копируются в буфер обмена
toFront показывает окно поверх других окон
tooltip задает тултип, который появится при наведении курсора на элемент
top положение окна по вертикали
type объект с настройками отображения элементов
url путь к данным, которые загрузятся в компонент сразу после инициализации
width задает ширину компонента
xCount задает ширину x-list (единица измерения - ширина одного элемента)
yCount задает высоту списка (единица измерения - высота одного элемента)
zIndex устанавливает z-index компонента
Other
$customPrint создаёт HTML-разметку для печати компонента и начинает печать
$drag метод вызывается, когда когда пользователь начинает перетаскивать элемент
$dragCreate метод вызывается в момент начала действия drag-n-drop
$dragDestroy метод вызывается в момент окончания drag-n-drop
$dragHTML определяет вид перетягиваемого элемента
$dragIn метод вызывается, когда перетаскиваемый элемент попал в зону над возможной целью перетаскивания
$dragMark вызывается во время драг-н-дроп и помечает один из элементов компонента как активную цель перетаскивания
$dragOut метод вызывается, когда перетаскиваемый элемент покидает зону над возможной целью перетаскивания
$dragPos определяет положение перетаскиваемого компонента
$drop метод вызывается, когда элемент перемещён на подходящую цель
$dropAllow переопределяет правила перетаскивания элемента на цель
$dropHTML определяет вид цели перетаскивания перед тем, как пользователь перетащит на нее элемент
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$scope область имен для событий и методов
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$tooltipIn показывает тултип
$tooltipMove определяет поведение тултипа в момент, когда курсор перемещается над компонентом или HTML-областью
$tooltipOut определяет поведение тултипа в момент, когда курсор выходит за пределы компонента или HTML-области
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
data DataStore компонента
name возвращает имя компонента (свойство только для чтения)
on_click переопределяет обработку кликов по элементам компонента
on_context свойство, используемое для определения пользовательских обработчиков клика правой кнопкой мыши для элементов в компонентах
on_dblclick определяет обработчики для двойных кликов по элементам компонентов (по названию их CSS-класса)
on_mouse_move добавляет обработчик для события mousemove над элементами компонентов (по названию их CSS-класса)
type набор свойств и хелперов для рендеринга элементов
types набор предопределенных типов
waitData конечный результат загрузки данных в компонент (промис)
Наверх
If you have not checked yet, be sure to visit site of our main product Webix widget library and page of javascript context menu product.