Context

API Reference

Overview

Ui-related context points to an element that will be shown on the page on 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"
});

Related sample:  Context Menu: UI Components Inside

Comments:

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

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

Working with Context

What can be 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"
});

Related sample:  Context Menu: UI Components Inside

  • Any HTML element referred to by its ID:

The ID is specified in the body constructor as value of 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>

Related sample:  Context Menu: HTML Content

Related Articles

Back to top