behavior: menu

此行为提供基本的分层菜单功能

Elements

默认情况下，此行为应用于：

• <menu> - 上下文菜单;

•   <menu> - 弹出菜单。

Model

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> 元素或定义了 role=menu-item 属性的任何其他块元素被视为可选择的菜单项，因此会生成“单击”事件。

例如，以下标记：

<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>

将呈现弹出菜单，菜单项以 3x2 表格组织。

菜单项可能有子项 <menu>

<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>

Attributes

行为：菜单未使用任何特定属性。

Methods

通常菜单是不可见的 - 使用 display：none 样式声明。由于菜单具有非常特定的生命周期，因此无法用 CSS 来描述它们的可见性。

要显示菜单，请致电 menuOwnerElement.popup(menuElement, ...) .其中 the menuOwnerElement 是将“拥有”菜单的 DOM 元素，menuElement 是要为 owner 元素呈现的元素之一 <menu> 。

States

• :owns-popup 当显示菜单时，在菜单所有者元素（ menuOwnerElement 上面）上设置状态标志;

• :popup - 在显示 <menu> 元素时在元素上设置。

Events

• "click" - 当用户单击菜单项时发布，Event.target 是菜单项。

Value

 不适用

Menu item clicks handling in script

var menuitem = document.$("menu#some>li:first-child");
menuitem.onclick = function(evt) { ... }

on() subscription

document.on("click", "menu#some > li.file-open", function(evt) { 
 // 'this' here is that li#file-open item  
});