• General
• Overview
• Events
• Properties
• Methods
• Related
• Dialogs
• Overlays

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. <input id="input-tag"> <script> $("#input-tag").w2tag('Automatic tag. It can hold any HTML and be quite long', { auto: true, maxWidth: 200, position: 'top|bottom', className: 'w2ui-light' }) </script>

Preview

Hover over this field 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: options: { id : null, // id for the tag, otherwise input id is used auto : null, // if true, then tag will show on mouseEnter and hide on mouseLeave 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 maxWidth : null, // max width to grow style : '', // addition style for the tag css : {}, // add css for input when tag is shown className : '', // add class bubble - 'w2ui-light' for light color tag inputClass : '', // add class for input when tag is shown hideOnKeyPress : true, // hide tag if key pressed hideOnFocus : false, // hide tag on focus hideOnBlur : false, // hide tag on blur hideOnClick : false, // hide tag on document click hideOnChange : true, // hide if input changed showOn : 'mouseeneter', // show tag on hideOn : 'mouseleave', // hide tag on 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. let html = ` <div style="padding: 10px; line-height: 1.5"> This is an overlay.<br>Can be multi line HTML. </div>` $('#input-overlay').w2overlay({ html, align: 'both' })

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 : {} }

$().w2menu(menu, options)

Displays popup menu For example: $('#id').w2menu({ items: [ { id: 1, text: 'Item 1', icon: 'icon-page' }, { id: 2, text: 'Item 2', icon: 'icon-page' }, { id: 3, text: 'Item 3', icon: 'icon-page' }, ], align: 'both', onSelect(event) { $('#input-menu').val(event.item.text) } })

Preview

Click on this field You can use any valid overlay option for the w2memnu as well. In addition it has following options: { type : 'normal', // can be normal, radio, check index : null, // current selected items : [], // menu items render : null, // custom renderer msgNoItems : 'No items found', hideOnSelect : true, // hide menu when item selected hideOnRemove : false, // hide menu if item removed onSelect : null, // select event onRemove : null // remove event } Items is an array of objects item: { id : null, text : '', style : '', img : '', icon : '', count : '', tooltip : '', hidden : false, checked : null, disabled : false ... }

$().w2color(options, callBack)

Displays color picker menu for the element. It is used in w2toolbar for color and text-color menus. For example: $('#id').w2color({ color: $(this).val(), transparent: true, html: 'Custom Colors', onSelect(color) { $('#input-color') .val(color) .w2overlay() // hide } })

Preview

Click on this field You can use any valid overlay option for the color as well. In addition it has following options: options: { color: '#000000', // default color to display transparent: true, // boolean, if true will show transparent color selection html: '', // additional HTML at the bottom of dialog onSelect: function, // func, called when color is selected }

User Comments

comments powered by Disqus