контекстное меню.
Контекстное меню открывается, когда пользователь кликает правой кнопкой мыши по элементу интерфейса. Вы можете добавлять сколько угодно вложенных опций в меню. Подробнее в описательной документации.
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"
});
| 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 | возвращает объект формы, которой принадлежит компонент |
| 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 | скрывает компонент |
| hideMenuItem | скрывает опцию меню |
| isEnabled | проверяет, активен или заблокирован компонент |
| isItemEnabled | проверяет, заблокирован ли элемент |
| isSelected | проверяет, выбран указанный элемент или нет |
| isVisible | проверяет, виден ли компонент |
| load | загружает данные из внешнего источника данных |
| loadNext | отправляет запрос на загрузку определённого количества строк данных (до конца имеющихся данных или до определённой позиции) |
| locate | получает id элемента по связанному с ним HTML событию |
| mapEvent | направляет события от одного компонента к другому |
| 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 | прокручивает содержимое компонента до нужного элемента |
| showMenuItem | показывает скрытый элемент меню |
| sizeToContent | подстраивает размеры меню и его опций под содержимое |
| sort | сортирует DataStore |
| sync | позволяет синхронизировать данные (все или часть) двух компонентов или DataCollection |
| unbind | отменяет связывание компонентов |
| unblockEvent | отменяет блокировку событий, которая была вызвана командой 'blockEvent' |
| unselect | убирает выделение с указанного элемента |
| unselectAll | убирает выделение со всех элементов |
| updateItem | обновляет элемент данных (изменяет его поля) |
| validate | проверяет один элемент или все данные |
| waitSave | позволяет определить момент, когда операции над данными были сохранены на сервер |
| onAfterAdd | срабатывает после добавления элемента в DataStore |
| onAfterContextMenu | срабатывает после вызова контекстного меню |
| onAfterDelete | срабатывает после удаления элемента |
| onAfterDrop | срабатывает после того, как элемент перетащили на цель |
| onAfterLoad | срабатывает после завершения загрузки данных |
| onAfterRender | происходит сразу после рендеринга компонента |
| onAfterScroll | срабатывает после прокрутки содержимого компонента webix |
| onAfterSelect | срабатывает после выбора элемента |
| onAfterSort | срабатывает после сортировки данных |
| onAfterUnSelect | срабатывает после отмены выделения элемента |
| onBeforeAdd | срабатывает перед добавлением элемента в DataStore |
| onBeforeContextMenu | срабатывает перед вызовом контекстного меню |
| onBeforeDelete | срабатывает перед удалением элемента |
| onBeforeDrag | срабатывает перед тем, как курсор переместили на элемент и нажали левую кнопку мыши |
| onBeforeDragIn | срабатывает перед тем, как элемент будет перемещён в зону над целью перетаскивания |
| onBeforeDrop | срабатывает перед тем, как элемент помещён на цель перетаскивания |
| onBeforeDropOut | срабатывает перед тем, как элемент перемещен на цель вне компонента, в котором элемент находился |
| onBeforeLoad | запускается непосредственно перед началом загрузки данных |
| onBeforeRender | происходит перед рендерингом компонента |
| onBeforeSelect | срабатывает перед выбором элемента |
| onBeforeShow | срабатывает после вызова метода show() у компонентов window и popup перед тем, как окно появится |
| onBeforeSort | срабатывает перед сортировкой данных |
| onBeforeUnSelect | срабатывает до начала отмены выделения элемента |
| onBindRequest | срабатывает, когда компонент готов получить данные из главного компонента |
| onBlur | срабатывает при смещении фокуса за пределы компонента |
| onDataRequest | срабатывает, когда данные с сервера запрашиваются для линейных данных (List, DataTable, DataView и т.д.) для динамической загрузки данных |
| onDataUpdate | срабатывает при обновлении элемента данных |
| onDestruct | происходит, когда компонент был разрушен деструктором |
| onDragOut | срабатывает, когда элемент перемещён за пределы цели перетаскивания |
| onEnter | срабатывает после нажатия клавиши Enter |
| onFocus | срабатывает после смещения фокуса на компонент |
| onHide | срабатывает, когда окно скрылось |
| onItemClick | срабатывает после клика по элементу компонента |
| onItemDblClick | срабатывает после двойного клика по элементу компонента |
| onItemRender | срабатывает при перерисовке элементов с заданным пользователем темплейтом |
| onItemSingleClick | позволяет различать события одиночного и двойного клика |
| 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()) |
| animate | определяет анимацию для показа компонента в Multiview |
| autofit | адаптирует размеры окна под размеры HTML-контейнера, в котором окно инициализировали |
| autofocus | автоматически перемещает фокус на содержимое окна при его появлении |
| autoheight | подстраивает высоту компонента под суммарную высоту всех его элементов |
| autowidth | подстраивает ширину компонента под суммарную ширину всех его элементов |
| body | основная часть окна, в которой могут быть любые компоненты или HTML |
| borderless | скрывает или показывает границы компонента |
| click | задает обработчик для кликов по кнопке |
| clipboard | включить / выключить поддержку буфера обмена на десктопных устройствах |
| container | HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован |
| css | имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями |
| data | данные для компонента (массив, типизированный массив, XML или CSV) |
| datathrottle | устанавливает промежуток времени между запросами данных (период времени между завершением одного запроса и началом следующего запроса) |
| datatype | тип загружаемых данных |
| delimiter | устанавливает разделители CSV для операций с буфером обмена |
| disabled | блокирует или разблокирует компонент |
| drag | включает или отключает драг-н-дроп для компонента |
| dragscroll | включает автоматическую прокрутку компонента во время перетаскивания его элементов |
| escHide | переключает поведение "спрятать при нажатии Esc" |
| externalData | позволяет переопределить логику перемещения элементов компонента |
| gravity | задает удельный (относительный) размер компонента |
| height | задает высоту компонента |
| hidden | скрывает компонент после его инициализации |
| id | ID компонента |
| item | алиас свойства type |
| keyPressTimeout | задержка между нажатием клавиши и обработчиком |
| layout | определяет тип списка (вертикальный или горизонтальный) |
| left | задает положение окна на экране (по горизонтали) |
| master | ID мастер-компонента окна (свойство только для чтения) |
| maxHeight | определяет максимальную высоту компонента |
| maxWidth | определяет максимальную ширину компонента |
| minHeight | задает минимальную высоту компонента |
| minWidth | задает минимальную ширину компонента |
| modal | делает окно модальным |
| mouseEventDelay | задержка между реальным действием мыши и вызовом связанных событий |
| 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 компонента |
| $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 | конечный результат загрузки данных в компонент (промис) |