mozilla
您的搜索结果

    XUL_教程/更多菜单特性

     

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

    创建子菜单

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

    Example 1 : Source View

    Image:menubar-ex3.png
    <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>
    
    Image:menubar1.png

    在此我们已经加入了两个菜单以及一些不同的菜单命令。注意菜单栏是如何放置在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属性值,因此不是这个菜单组的一部分。

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

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

    文档标签和贡献者

    标签: 
    此页面的贡献者有: ziyunfei, Sheppy, LiD
    最后编辑者: ziyunfei,