This behavior provides basic hierarchical menu functionality
that have this behavior applied by default to:
<menu class="context"> - context menu;<menu class="popup"> - popup menu.Example of menu declaration in Sciter:
<menu.popup> <li id="file-open">Open File <span.accesskey>Ctrl+O</span></li> <hr> <li id="file-save">Save File <span.accesskey>Ctrl+S</span></li> <li id="file-save-as">Save File as ...<span.accesskey>Ctrl+Shift+S</span></li> </menu>
<li> elements or any other block element that has role=menu-item attribute defined are treated as selectable menu items and can generate MENU_ITEM_CLICK events.
For example, this markup:
<menu.popup>
<table>
<tr><td role="menu-item" id="red">Red</td>
<td role="menu-item" id="green">Green</td>
<td role="menu-item" id="blue">Blue</td></tr>
<tr><td role="menu-item" id="cyan">Cyan</td>
<td role="menu-item" id="magenta">Magenta</td>
<td role="menu-item" id="yellow">Yellow</td></tr>
</table>
</menu>
will render popup menu with menu items organized in 3x2 table.
Menu items may have sub-<menu>s
<menu.popup>
<li id="file-open">Open File <span.accesskey>Ctrl+O</span></li>
<hr>
<li>Recent Files
<menu id="LRU">
<li>My file.htm</li>
<li>His file.htm</li>
<li>Her file.htm</li>
</menu>
</li>
</menu>
behavior:menu is not using any specific attributes.
Normally menus are invisible - declared with display:none styles. As menus have quite specific life cycle their visibility cannot be described in terms of CSS.
To show the menu you shall call menuOwnerElement.popup(menuElement, ...). Where the menuOwnerElement is the DOM element that will "own" the menu and menuElement is one of <menu> elements that you want to present for the owner element.
:owns-popup state flag is set on menu owner element ( menuOwnerElement above ) when menu is shown;:popup - is set on the <menu> element when it is shown.N/A
onControlEvent handler
var edit = $(input#some);
edit.onControlEvent = function(evt)
{
switch(evt.type) {
case Event.MENU_ITEM_CLICK: /* evt.target is the menu item */ break;
}
}
on() subscriptionvar edit = $(input#some);
edit.on("click", "li#file-open", function(evt) {
// 'this' here is that li#file-open item
});
include "decorators.tis"; @click @on "li#file-open" :: ... event handling code ...;