ui.portlet

подвижный компонент лейаута, который может содержать другие компоненты внутри.

Portlet может содержать любой компонент. Если добавить в интерфейс несколько портлетов, их можно менять местами перетаскивая на любую позицию. Подробнее читайте в описательной документации portlet.

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

var portlet = webix.ui({  
    type:"space",
    rows:[
        { view:"portlet", body:{template:"row 1"}, id:"p1"},
        { view:"portlet", body:{template:"row 2"}, id:"p2"},
        { view:"portlet", body:{template:"row 3"}, id:"p3"}
    ]
});

С чего начать

Methods
addView добавляет новый компонент в лейаут или перемещает существующий
adjust подстраивает размеры компонента под размеры HTML-контейнера
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
enable делает активным ранее заблокированный компонент
getChildViews возвращает внутренние компоненты
getFormView возвращает объект формы, которой принадлежит компонент
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getTopParentView возвращает самого верхнего родителя
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
index возвращает порядковый номер (индекс) компонента лейаута
isEnabled проверяет, активен или заблокирован компонент
isVisible проверяет, виден ли компонент
mapEvent направляет события от одного компонента к другому
markDropArea отображает маркер на области, куда портлет может быть помещен во время перетаскивания
movePortlet перемещает портлет на место другого компонента
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
reconstruct перестраивает лейаут
removeView удаляет компонент из лейаута
resize перерисовывает компонент после изменения размеров
resizeChildren перерисовывает все компоненты внутри лейаута
restore восстанавливает состояние лейаута
serialize сохраняет текущее состояние лейаута в JSON объект
show делает компонент видимым
showBatch делает видимыми те элементы, параметр 'batch' которых задан определенным именем
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
Events
onAfterPortletMove срабатывает после перемещения портлета
onBeforePortletMove срабатывает перед перемещением портлета
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onDestruct происходит, когда компонент был разрушен деструктором
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
body определяет содержимое portlet (компонент или HTML)
borderless скрывает или показывает границы компонента
cols массив колонок лейаута
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
disabled блокирует или разблокирует компонент
gravity задает удельный (относительный) размер компонента
height задает высоту компонента
hidden скрывает компонент после его инициализации
icon задает иконку для портлета
id ID компонента
isolate изолирует ID всех внутренних элементов в пределах компонента
layoutType определяет тип лейаута, который будет создан после завершения перетаскивания portlet
margin задает отступы между элементами лейаута
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
mode определяет режим перемещения портлетов
on позволяет присоединять обработчики к внутренним событиям компонента
padding определяет пространство между границами лейаута и его содержимым
paddingX задает правый и левый отступ внутри лейаута
paddingY задает верхний и нижний отступы внутри лейаута
responsive включает адаптивность для лейаута
rows ряды лейаута
type определяет границы и отступы в лейауте
visibleBatch задает группу контролов, которые будут видны после инициализации
width задает ширину компонента
Other
$drag метод вызывается, когда когда пользователь начинает перетаскивать элемент
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
name возвращает имя компонента (свойство только для чтения)
Наверх
If you have not checked yet, be sure to visit site of our main product Webix ui library and page of javascript drag and drop library product.