Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

XUL_教程/简单菜单栏

 

在本节中,我们来看看如何创建菜单栏及菜单项。

创建菜单

XUL有几种不同的方式来创建菜单。最基本的方式当然是类似大多数程序拥有一个菜单栏并附有一排菜单项在上面。也可以创建弹出式菜单。XUL的菜单特性由几种不同的元素组成,它可以让你创建菜单栏和弹出式菜单。菜单上的项可以轻松的进行自定义。我们在part of how to make menus一文中已经学习过使用menulist了。本节我们就以此为基础。

菜单栏通常像toolbar一样创建。菜单栏也可以放置于toolbox中,则菜单就像在其它类型工具栏一样。XUL拥有一些特殊元素,可以提供一些特定功能的菜单。

有五种相关的元素用来创建菜单栏及其菜单,在此我们简单解释一下,在后面我们再详述:

menubar
一排菜单的窗口。
menu
尽管名字是菜单,但它实际上在菜单栏上仅仅体现其主题而已。该元素可以放置在菜单栏中或者独立放置。
menupopup
当点击菜单主题时,弹出框会显现。该框包括了菜单命令的列表。
menuitem
菜单上的独立命令。应放置于menupopup中。
menuseparator
菜单上的分割条。应放置于menupopup中。

你可以在除Macintosh之外的任何平台在菜单栏中自定义任何你想要的菜单。这是因为Macintosh自己特殊的菜单置于屏幕最顶端,由系统控制着。虽然你可以创建自定义菜单,但放置于菜单上的任何特殊样式的规则或非菜单元素均不能生效。在创建菜单时头脑中留意这一点。

简单菜单栏示例

Example 1 : Source View

Image:menubar-ex1.png
<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="File">
      <menupopup id="file-popup">
        <menuitem label="New"/>
        <menuitem label="Open"/>
        <menuitem label="Save"/>
        <menuseparator/>
        <menuitem label="Exit"/>
      </menupopup>
    </menu>
    <menu id="edit-menu" label="Edit">
      <menupopup id="edit-popup">
        <menuitem label="Undo"/>
        <menuitem label="Redo"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

喏,使用menubar元素创建了一个简单的菜单栏。上面还会创建一排菜单。menu元素在菜单顶端创建菜单主题显示于菜单栏上。使用menupopup元素创建弹出菜单。用户点击父菜单主题时,会弹出显示。弹出菜单框的大小会足够的大,可以容纳里面所有的菜单命令显示。菜单命令本身使用menuitem元素进行创建。每一个都代表菜单弹出框上的一个单独命令。

你还可以使用menuseparator元素创建菜单上面的分割线。用于分割不同的菜单项组。

menubar是一个包括菜单的框。注意它已经被放置于一个固定的toolbox中。菜单栏没有特殊的属性一,仅仅是一种类型的框。这意味着可以创建一个垂直的工具栏,通过设置orient属性为vertical。

menu元素运行起来就像是button元素。可以接受与它相同的部分属性及额外的一些属性:

id
菜单主题按钮的唯一标识符。
label
显示在菜单上的文字,例如 文件 或 编辑。
disabled
该布尔属性决定菜单是否被禁用。虽然可以,但很少情况需要禁止整个菜单。该属性值可以被设置为true或者false。当然,后者是默认值。
accesskey
该属性值是用户可以按键盘激活菜单项的键值。该字母通常在菜单主题后面以下划线方式显示。Mozilla会视标签属性根据在此指定的字符给它加上下划线。因此,需要指定一个在文本中存在的字符(尽管指定的键不在文本中也能正常工作)。
Image:menubar-ex2.jpg

menu元素通常放置在菜单栏上,尽管这不是必需的。但是,这将出现不一样的显示结果。此处的图片展示了早期没有菜单栏的示例看起来的效果。

menupopup元素创建包括菜单命令的弹出窗口。它是一种类型的框,默认为垂直布局。如果你想要并且将menuitems放置在一排中,你可以将它改为水平布局。通常仅有menuitems元素和menuseparators放置在menupopup中。你可以放置任何元素在menupopup中,但是在Macintosh中它们都会被忽略。

menuitem元素与menu元素非常相似并且拥有部分相同属性。

id
菜单项的唯一标识符。
label
显示在菜单项上的文本,例如打开 或 保存。
disabled
该布尔属性值决定菜单项是否被禁止。该属性可以被设置为true或者false,但默认值是后者。
accesskey
该值是用户可以使用键盘激活菜单项的键值。该字母通常以下划线方式显示于菜单主题后面。Mozilla将视label属性值给指定的字母加上下划线。因此,你需要指定在文本中存在的字符。
acceltext
该值指定显示在菜单命令末尾的快捷键文本提示。但是它还没有与menuitem进行键的关联。我们在后面再研究如何do this later.

menuseparator没有特别的属性。它只是在两个相信的菜单元素之间创建一条水平的分割线。

下一节,我们会学习一些更多菜单特性.

文档标签和贡献者

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