ui.sidemenu
всплывающее меню с эффектом анимации.
Всплывающее меню, появляющееся на экране с эффектом анимации. Вы можете настроить размеры Sidemenu и его положение на экране. В Sidemenu можно поместить любой компонент, включая лейауты. Подробнее читайте в описательной документации sidemenu.
Инициализация
var sidemenu = webix.ui({
view: "sidemenu",
width: 200,
position: "left",
body:{
view:"list",
borderless:true,
scroll: false,
template: "<span class='webix_icon fa-#icon#'></span> #value#",
data:[
{id: 1, value: "Users", icon: "user"},
{id: 2, value: "Products", icon: "cube"},
{id: 3, value: "Reports", icon: "line-chart"}
]
}
}).show();
С чего начать
Based on:
ui.popup,
ui.window,
ui.view,
ui.baseview,
Settings,
Destruction,
BaseBind,
Movable,
Modality,
EventSystem,
ResizeArea
Methods
| adjust | подстраивает размеры компонента под размеры HTML-контейнера |
| attachEvent | задает обработчик внутреннего события компонента |
| bind | связывает данные компонентов |
| blockEvent | временно блокирует вызов ВСЕХ событий вызывающего объекта |
| callEvent | вызывает внутреннее событие компонента |
| define | переопределяет одну или несколько настроек компонента |
| destructor | разрушает компонент |
| detachEvent | удаляет обработчик события (который был задан ранее методом attachEvent) |
| disable | блокирует компонент (он становится серым, клики по нему не срабатывают) |
| enable | делает активным ранее заблокированный компонент |
| getBody | возвращает компонент, который поместили в основную часть окна |
| getChildViews | возвращает внутренние компоненты |
| getFormView | возвращает объект формы, которой принадлежит компонент |
| getNode | возвращает HTML-элемент компонента |
| getParentView | возвращает родительский компонент |
| getTopParentView | возвращает самого верхнего родителя |
| hasEvent | проверяет, есть ли у компонента обработчики указанного события |
| hide | скрывает компонент |
| isEnabled | проверяет, активен или заблокирован компонент |
| isVisible | проверяет, виден ли компонент |
| mapEvent | направляет события от одного компонента к другому |
| queryView | возвращает внутренние компоненты, которые удовлетворяют указанному условию |
| resize | перерисовывает компонент после изменения размеров |
| resizeChildren | перерисовывает все вложенные компоненты |
| setPosition | задает положение окна на экране (в пикселях) |
| show | делает компонент видимым |
| unbind | отменяет связывание компонентов |
| unblockEvent | отменяет блокировку событий, которая была вызвана командой 'blockEvent' |
Events
| onAfterScroll | срабатывает после прокрутки содержимого компонента webix |
| onBeforeShow | срабатывает после вызова метода show() у компонентов window и popup перед тем, как окно появится |
| onBindRequest | срабатывает, когда компонент готов получить данные из главного компонента |
| onBlur | срабатывает при смещении фокуса за пределы компонента |
| onDestruct | происходит, когда компонент был разрушен деструктором |
| onEnter | срабатывает после нажатия клавиши Enter |
| onFocus | срабатывает после смещения фокуса на компонент |
| onHide | срабатывает, когда окно скрылось |
| onKeyPress | срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус) |
| onLongTouch | срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном) |
| onShow | срабатывает, когда окно появилось |
| onSwipeX | срабатывает по горизонтальному свайпу |
| onSwipeY | срабатывает по вертикальному свайпу |
| onTabFocus | срабатывает после смещения фокуса на другой компонент с помощью клавиши Tab |
| onTimedKeyPress | срабатывает через некоторое время после нажатия клавиши в текстовом поле |
| onTouchEnd | срабатывает после завершения события touch |
| onTouchMove | срабатывает по время движения пальца по сенсорному экрану |
| onTouchStart | срабатывает после touch-события в компоненте webix |
| onViewMove | срабатывает, когда компонент перетаскивают |
| onViewMoveEnd | срабатывает, когда компонент перестает двигаться |
| onViewResize | срабатывает при изменении размера компонента |
| onViewShow | срабатывает, когда компонент появляется (вызов метода show()) |
Properties
| animate | определяет анимацию для показа компонента в Multiview |
| autofit | адаптирует размеры окна под размеры HTML-контейнера, в котором окно инициализировали |
| autofocus | автоматически перемещает фокус на содержимое окна при его появлении |
| body | основная часть окна, в которой могут быть любые компоненты или HTML |
| borderless | скрывает или показывает границы компонента |
| container | HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован |
| css | имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями |
| disabled | блокирует или разблокирует компонент |
| escHide | переключает поведение "спрятать при нажатии Esc" |
| gravity | задает удельный (относительный) размер компонента |
| height | задает высоту компонента |
| hidden | скрывает компонент после его инициализации |
| id | ID компонента |
| keyPressTimeout | задержка между нажатием клавиши и обработчиком |
| left | задает положение окна на экране (по горизонтали) |
| master | ID мастер-компонента окна (свойство только для чтения) |
| maxHeight | определяет максимальную высоту компонента |
| maxWidth | определяет максимальную ширину компонента |
| minHeight | задает минимальную высоту компонента |
| minWidth | задает минимальную ширину компонента |
| modal | делает окно модальным |
| on | позволяет присоединять обработчики к внутренним событиям компонента |
| padding | задаёт внутренние отступы для всех четырёх сторон виджета |
| point | добавляет стрелку окну или убирает ее |
| position | задает положение окна на экране |
| relative | задает положение окно относительно его мастер-компонента |
| resize | позволяет изменить размер компонента |
| state | определяет размер Sidemenu и его положение на экране |
| toFront | показывает окно поверх других окон |
| top | положение окна по вертикали |
| width | задает ширину компонента |
| zIndex | устанавливает z-index компонента |
Other
| $dragCreate | метод вызывается в момент начала действия drag-n-drop |
| $dragDestroy | метод вызывается в момент окончания drag-n-drop |
| $dragPos | определяет положение перетаскиваемого компонента |
| $getSize | возвращает текущий размер компонентов |
| $height | текущая высота компонента |
| $scope | область имен для событий и методов |
| $setNode | определяет HTML-элемент компонента |
| $setSize | задает размеры компонента |
| $skin | вызывается после применения скина |
| $view | возвращает HTML-элемент компонента |
| $width | текущая ширина компонента |
| config | все настройки, заданные при инициализации компонента |
| name | возвращает имя компонента (свойство только для чтения) |
Наверх