ui.accordionitem

Панель компонента Accordion.

У каждой панели есть хедер и основная часть. Панель можно свернуть или развернуть по клику на ее хедер. Подробнее читайте в описательной документации accordionitem.

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

var accordionitem = webix.ui({
    view:"accordion",
    height:600,
    rows:[
    {
      view:"accordionitem",
      header:"Pane 1",
      headerHeight:50,
      body:"Pane body 1",
    },
    { 
      view:"accordionitem",
      header:"Pane 2",
      body:"Pane body 2", 
      collapsed: true
    }]
});

С чего начать

Methods
adjust подстраивает размеры компонента под размеры HTML-контейнера
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
collapse сворачивает указанную панель аккордеона
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
enable делает активным ранее заблокированный компонент
expand разворачивает панель аккордеона
getChildViews возвращает внутренние компоненты
getFormView возвращает объект формы, которой принадлежит компонент
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getTopParentView возвращает самого верхнего родителя
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
isEnabled проверяет, активен или заблокирован компонент
isVisible проверяет, виден ли компонент
mapEvent направляет события от одного компонента к другому
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
refresh обновляет текст хедера
resize перерисовывает компонент после изменения размеров
show делает компонент видимым
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
Events
onAfterContextMenu срабатывает после вызова контекстного меню
onAfterScroll срабатывает после прокрутки содержимого компонента webix
onBeforeContextMenu срабатывает перед вызовом контекстного меню
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onBlur срабатывает при смещении фокуса за пределы компонента
onDestruct происходит, когда компонент был разрушен деструктором
onEnter срабатывает после нажатия клавиши Enter
onFocus срабатывает после смещения фокуса на компонент
onItemClick срабатывает после клика по элементу компонента
onItemDblClick срабатывает после двойного клика по элементу компонента
onKeyPress срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус)
onLongTouch срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном)
onMouseMove срабатывает при наведении мыши на указанный компонент
onMouseMoving срабатывает при наведении указателя мыши на компонент
onMouseOut срабатывает, когда курсор мыши убирается с указанного элемента
onSwipeX срабатывает по горизонтальному свайпу
onSwipeY срабатывает по вертикальному свайпу
onTimedKeyPress срабатывает через некоторое время после нажатия клавиши в текстовом поле
onTouchEnd срабатывает после завершения события touch
onTouchMove срабатывает по время движения пальца по сенсорному экрану
onTouchStart срабатывает после touch-события в компоненте webix
onViewResize срабатывает после того, как пользователь изменил размер компонента с помощью компонента resizer
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
body определяет содержимое панели (компонент или HTML)
borderless скрывает или показывает границы компонента
collapsed отображает панель, свернутую изначально
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
disabled блокирует или разблокирует компонент
gravity задает удельный (относительный) размер компонента
header задает текст хедера, когда панель развернута
headerAlt задает текст хедера панели, когда она свернута
headerAltHeight высота хедера свернутой панели (технически, ширину)
headerHeight высота хедера панели
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
keyPressTimeout задержка между нажатием клавиши и обработчиком
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
mouseEventDelay задержка между реальным действием мыши и вызовом связанных событий
on позволяет присоединять обработчики к внутренним событиям компонента
onClick присоединяет обработчик клика для частей компонента с указанным классом CSS
onContext свойство, используемое для определения пользовательских обработчиков контекстного клика (клика правой кнопкой мыши) для элементов в ячейках DataTable
onDblClick обрабатывает двойные клики по областям и элементам компонентов (по названию их CSS-классов)
onMouseMove обрабатывает событие mousemove для элементов компонента с указанным классом CSS
width задает ширину компонента
Other
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$scope область имен для событий и методов
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
name возвращает имя компонента (свойство только для чтения)
on_click переопределяет обработку кликов по элементам компонента
on_context свойство, используемое для определения пользовательских обработчиков клика правой кнопкой мыши для элементов в компонентах
on_dblclick определяет обработчики для двойных кликов по элементам компонентов (по названию их CSS-класса)
on_mouse_move добавляет обработчик для события mousemove над элементами компонентов (по названию их CSS-класса)
Наверх
If you have not checked yet, be sure to visit site of our main product Webix html5 framework and page of accordion tabs product.