Popup: Overlays | JavaScript UI

Overlays

An overlay is a popup within the page. Technically, it is not part of the w2popup object. It is part of w2utils. However, it is described here due to its functional similarity to popups. Tags and overlays are common purpose jQuery plugins and should be called in jQuery plugin syntax.

$().w2tag(html, [options])

The plugin will display a tag on the right from specified element.

xxxxxxxxxx
 
<input id="input" onclick="$(this).w2tag('This is not valid');">
​

Preview

Click on this field

In w2form tags are used to display validation errors. The second parameter is optional and defines css class to be added to the element itself (not the tag). There can be many tags on the screen at the same time. If the element is moved, the tag will move with it. If it is destroyed, the tag will be destroyed. If you need to hide a tag, call w2tag again with empty text.

Options can be one of the following:

xxxxxxxxxx
 
options: {
    id              : null,     // id for the tag, otherwise input id is used
    html            : text,     // or html
    position        : 'right',  // can be left, right, top, bottom
    align           : 'none',   // can be none, left, right (only works for position: top | bottom)
    left            : 0,        // delta for left coordinate
    top             : 0,        // delta for top coordinate
    style           : '',       // addition style for the tag
    css             : {},       // add css for input when tag is shown
    className       : '',       // add class bubble
    inputClass      : '',       // add class for input when tag is shown
    hideOnKeyPress  : true,     // hide tag if key pressed
    hideOnBlur      : false,    // hide tag on blur
    hideOnClick     : false,    // hide tag on document click
    onShow          : null,     // callBack when shown
    onHide          : null      // callBack when hidden
}
​

$().w2overlay(options)

The plugin will display an overlay under (or above) the element. If element is by the edge of the screen, the overlay will be displayed in the visible portion of the page.

xxxxxxxxxx
 
<input id="input" onclick="
    var html = '<div style=\'padding: 10px\'>This is an overlay.<br>Can be multi line HTML.</div>';
    $(this).w2overlay(html)">
​

Preview

Click on this field

If first argument is a string, it will be treated as HTML to display. However, the first argument can be an object with options. If user clicks anywhere else on the screen the overlay will be hidden, which is not the same with tags. Normally, you can have only one overlay on the screen, however, you can provide a unique name if you want to display multiple overlays at the same time. Overlay supports following options:

options: {
    name          : null,      // it not null, then allows multiple concurrent overlays
    html          : '',        // html text to display
    align         : 'none',    // can be none, left, right, both
    left          : 0,         // offset left
    top           : 0,         // offset top
    tipLeft       : 30,        // tip offset left
    noTip         : false,     // if true - no tip will be displayed
    selectable    : false,     // if text is selectable inside the overlay
    width         : 0,         // fixed width
    height        : 0,         // fixed height
    maxWidth      : null,      // max width if any
    maxHeight     : null,      // max height if any
    contextMenu   : false,     // if true, it will be opened at mouse position
    pageX         : null,      // pageX from event.pageX object (for contextMenu)
    pageY         : null,      // pageY from event.pageY object (for contextMenu)
    originalEvent : null,      // original event (instead of pageX and pageY)
    style         : '',        // additional style for main div
    class         : '',        // additional class name for main div
    overlayStyle  : '',        // css style of entire overlay
    onShow        : null,      // event on show
    onHide        : null,      // event on hide
    openAbove     : false,     // show above control
    tmp           : {}
}

xxxxxxxxxx
 
options: {
    name          : null,      // it not null, then allows multiple concurrent overlays
    html          : '',        // html text to display
    align         : 'none',    // can be none, left, right, both
    left          : 0,         // offset left
    top           : 0,         // offset top
    tipLeft       : 30,        // tip offset left
    noTip         : false,     // if true - no tip will be displayed
    selectable    : false,     // if text is selectable inside the overlay
    width         : 0,         // fixed width
    height        : 0,         // fixed height
    maxWidth      : null,      // max width if any
    maxHeight     : null,      // max height if any
    contextMenu   : false,     // if true, it will be opened at mouse position
    pageX         : null,      // pageX from event.pageX object (for contextMenu)
    pageY         : null,      // pageY from event.pageY object (for contextMenu)
    originalEvent : null,      // original event (instead of pageX and pageY)
    style         : '',        // additional style for main div
    class         : '',        // additional class name for main div
    overlayStyle  : '',        // css style of entire overlay
    onShow        : null,      // event on show
    onHide        : null,      // event on hide
    openAbove     : false,     // show above control
    tmp           : {}
}
​

$().w2menu(options)

Displays context for the element. It is used in w2toolbar for dropdown menus and in w2grid and w2sidebar for context menus. For example:

xxxxxxxxxx
 
<input id="input" onclick="
    $(this).w2menu({
        items: [
            { id: 1, text: 'Edit', icon: 'fa fa-star' },
            { id: 2, text: '--'},
            { id: 3, text: 'Copy', icon: 'fa fa-star' },
            { id: 4, text: 'Paste', img: 'icon-page', disabled: true },
            { id: 5, text: 'Hidden', img: 'icon-page', hidden: true },
            { id: 6, text: '--'},
            { id: 7, text: 'Delete Item', img: 'icon-page' }
        ],
        onSelect: function (event) {
            console.log(event);
        }
    });">
​

Preview

Click on this field

You can use any valid overlay option for the menu as well. In addition it has following options:

xxxxxxxxxx
 
options: {
    type        : 'normal',     // can be normal, radio, check
    items       : [],           // array of items
    render      : null,         // function (menu_item, options) - when menu item is rendered
    spinner     : false,        // indicates if to show spinner
    onSelect    : null          // function (event) - when menu item is selected
    search      : false,        // indicates if to display search control
    // --- only when search is true ---
    match       : 'begins',     // can be is, begins, ends
    altRows     : false,        // display alternate background color
    index       : 0,            // index of the selected item (when selected by keyboard)
    msgNoItems  : 'No Items',   // default message where no items found
}
​

The items property is an array of objects of following structure:

xxxxxxxxxx
 
item : {
    id       : null,    // unique id
    text     : '',      // text for the item
    icon     : '',      // icon class
    img      : '',      // image class
    count    : null,    // count badge value
    style    : '',      // additional styles
    hotKey   : '',      // text to indicate what is hot key for the item
    tooltip  : '',      // tooltip for the item
    hidden   : false,   // indicates if hidden
    checked  : false,   // indicates if menu is checked (for check and radio)
    disabled : false,   // indicates if disabled
    ...                 // other custom properties
}
​

$().w2color(options, callBack)

Displays color picker menu for the element. It is used in w2toolbar for color and text-color menus. For example:

xxxxxxxxxx
 
<input id="input" onclick="
    $(this).w2menu({ color: '#000000', transparent: true }, function (color) {
        console.log('selected color is ' + color);
    });">
​

Preview

Click on this field

Overlays

$().w2tag(html, [options])

Preview

$().w2overlay(options)

Preview

$().w2menu(options)

Preview

$().w2color(options, callBack)

Preview

User Comments