XUL_教程/更多菜单特性

在本节中，我们来学习如何创建子菜单和check菜单。

创建子菜单

使用已存在元素可以在其它菜单（递归菜单）中创建子菜单。记住可以在menupopup中放置任意元素。我们已经学过在menuseparators中放置menuitems。但是，还可以通过在menupopup元素中简单的放置menu元素来创建子菜单。这样也可以运行，因为菜单元素即使不直接放在菜单栏里面它也是有效的。下面的示例在　文件　菜单中创建了一个简单的子菜单：

Example 1 : Source View

<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="File">
      <menupopup id="file-popup">
        <menu id="new-menu" label="New">
          <menupopup id="new-popup">
            <menuitem label="Window"/>
            <menuitem label="Message"/>
          </menupopup>
        </menu>
        <menuitem label="Open"/>
        <menuitem label="Save"/>
        <menuseparator/>
        <menuitem label="Exit"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

在我们的　查找文件　示例中加入菜单

让我们在查找文件对话框中加入菜单。我们仅加入少量简单的命令至　文件　菜单和　编辑　菜单中。这与上面示例类似。

<toolbox>

 <menubar id="findfiles-menubar">
  <menu id="file-menu" label="File" accesskey="f">
    <menupopup id="file-popup">
      <menuitem label="Open Search..." accesskey="o"/>
      <menuitem label="Save Search..." accesskey="s"/>  
      <menuseparator/>
      <menuitem label="Close" accesskey="c"/>
    </menupopup>
  </menu>
  <menu id="edit-menu" label="Edit" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem label="Cut" accesskey="t"/>
      <menuitem label="Copy" accesskey="c"/>
      <menuitem label="Paste" accesskey="p" disabled="true"/>
    </menupopup>
  </menu>
 </menubar>

<toolbar id="findfiles-toolbar>

在此我们已经加入了两个菜单以及一些不同的菜单命令。注意菜单栏是如何放置在toolbox内的。在　打开搜索　和　保存搜索　后面的三个点通常提示用户本命令操作会打开一个对话框。每个菜单和菜单项已经加入了访问快捷键。在图中可以看到菜单标签内的字母已经被打上了下划线。而　粘贴　命令在此被禁止。我们假定没有什么可以用来粘贴。

Our Find files example so far : Source View

给菜单加入勾选(check)标记

许多应用程序的菜单项都有check标记。例如，许可特性在命令里面会有一个check，而禁止特征则没有check在里面。当用户选择菜单后，check状态就进行了切换。你也可以在菜单项上创建radio按钮。

check创建类似于checkbox元素和radio元素。包括了两个属性的使用：type标识check的类型，而name标识同在一起的组命令。下面的示例创建一个带有check项的菜单。

Example 2 : Source View

<toolbox>
  <menubar id="options-menubar">
    <menu id="options_menu" label="Options">
      <menupopup>
        <menuitem id="backups" label="Make Backups" type="checkbox"/>
        <menuitem id="backups" label="Email Administrator" type="checkbox" checked="true"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

加入的type属性用来标识菜单项是可以check的。通过设置checkbox的值，通过选择菜单项，使它被勾选或取消勾选。

带有radio标记的菜单

除标准check菜单外，还可以通过设置type的值为radio来创建radio风格的check型菜单。radio风格的check菜单用于在一组目录项中仅选择一项的时候。例如在一个菜单中每次只能选取一个生效的情况。当选取另外一项时，前面的选择项就会自动取消选择。

为了将一组菜单项放置在一起，需要将每一项的name属性设置为一样，就会形成一个菜单组。示例如下：

Example 3 : Source View

<toolbox>
  <menubar id="planets-menubar">
    <menu id="planet-menu" label="Planet">
      <menupopup>
        <menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/>
        <menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/>
        <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
        <menuseparator/>
        <menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/>
        <menuitem id="moon" label="Moon" type="radio" name="inhabited"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

试一下这个示例，可以发现前三个菜单项只有一个可以被勾选。它们被聚为一组，因为他们的name属性值相同。最后一个菜单项－－Earth，一个radio按钮，由于拥有不同的name属性值，因此不是这个菜单组的一部分。

当然，聚集在一组中的项只能放置在相同的菜单中。虽然将它们相邻的放在一起比分开放要直观得多，但在菜单中并没有必要将它们放在一起。

下一回，我们将学习如何创建弹出菜单。