Context

API Reference

Overview

UI-related context points to an element that will be shown on the page on a right mouse click. The context looks like a popup window where you can place any HTML element or UI component.

Initialization

webix.ui({
    view:"context",
    width: 300,
    body:{ ... },
    padding:20,
    master:"areaA"
});

Comments:

master - the ID of an HTML container that will be shown on page loading. It is the area where a right mouse click will make context elements visible. This element is included into the body property;
body - an element (UI component) that appears on a right mouse click;
width - the width of the UI component that appears on a right mouse click;
padding - the offset from the context border and its inner contents.

Context features the hidden property set to true by default. It can be changed during the component's initialization, but this won't make much sense as the purpose of context is to be hidden and appear only on a right click.

Working with Context

What can be used as a context element?

Any UI-related component. For instance a two-button toolbar:

webix.ui({
    view:"context",
    body:{view: "toolbar", cols:[
        {view:"button", value:"Button1", width: 100},
        {view:"button", value:"Button2", width: 100}]
    }, 
    width: 300, 
    master:"context_area"
});

Any HTML element referred to by its ID:

The ID is specified in the body constructor as a value of the content property.

body:{ 
    content:"details"
}

Content will get elements that are inside the container.

<div id="details">
    Power of HTML5 
    <hr>
    <img src='http://webix.com/codebase/images/bg_touch.gif'>
</div>