behavior:menu-bar

This behavior provides horizontal menu bar - top level container for popup menus.

Default style system of the engine does not provide default styling of menu bars. If your application needs menu bars use {sdk}/samples/menu/std-menu.css as a prototype.

Elements

No elements has this behavior applied by default.  {sdk}/samples/menu/std-menu.css assumes that top level menu is defined by <ul id="menu-bar">  element.

Model

Example of menu declaration in Sciter:

<ul id="menu-bar">
  <li>
    <caption>File</caption>
    <menu>
      <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>
   ...
</ul>

Attributes

behavior:menu-bar is not using any specific attributes.  

Methods

No specific methods.

States

• :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.

Events

MENU_ITEM_CLICK

- posted when user clicks on menu item, Event.target is the menu item.

MENU_ITEM_ACTIVE

- is send when user activates the menu by mouse hovering or by navigating keys. Event.target is the menu item.

Menu item events get propagated in so called menu tree order. Element that owns the menu will receive all MENU_ITEM_CLICKs originated from menu it owns.

Value

N/A

Menu item clicks handling in script

var edit = $(input#some);
edit.onControlEvent = function(evt)
{
  switch(evt.type) {
    case Event.MENU_ITEM_CLICK: /* evt.target is the menu item */ break;
  }
}

on() subscription

var edit = $(input#some);
edit.on("click", "li#file-open", function(evt) {
  // 'this' here is that li#file-open item
});

decorators.tis handler

include "decorators.tis";
@click @on "li#file-open" :: ... event handling code ...;