在本节中,我们来看看如何创建菜单栏及菜单项。
创建菜单
XUL有几种不同的方式来创建菜单。最基本的方式当然是类似大多数程序拥有一个菜单栏并附有一排菜单项在上面。也可以创建弹出式菜单。XUL的菜单特性由几种不同的元素组成,它可以让你创建菜单栏和弹出式菜单。菜单上的项可以轻松的进行自定义。我们在part of how to make menus一文中已经学习过使用
了。本节我们就以此为基础。menulist
菜单栏通常像toolbar
一样创建。菜单栏也可以放置于
中,则菜单就像在其它类型工具栏一样。XUL拥有一些特殊元素,可以提供一些特定功能的菜单。toolbox
有五种相关的元素用来创建菜单栏及其菜单,在此我们简单解释一下,在后面我们再详述:
menubar
- 一排菜单的窗口。
menu
- 尽管名字是菜单,但它实际上在菜单栏上仅仅体现其主题而已。该元素可以放置在菜单栏中或者独立放置。
menupopup
- 当点击菜单主题时,弹出框会显现。该框包括了菜单命令的列表。
menuseparator
- 菜单上的分割条。应放置于
menupopup
中。
你可以在除Macintosh之外的任何平台在菜单栏中自定义任何你想要的菜单。这是因为Macintosh自己特殊的菜单置于屏幕最顶端,由系统控制着。虽然你可以创建自定义菜单,但放置于菜单上的任何特殊样式的规则或非菜单元素均不能生效。在创建菜单时头脑中留意这一点。
简单菜单栏示例
<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
元素
是一个包括菜单的框。注意它已经被放置于一个固定的menubar
中。菜单栏没有特殊的属性一,仅仅是一种类型的框。这意味着可以创建一个垂直的工具栏,通过设置toolbox
属性为vertical。orient
menu
元素
元素运行起来就像是menu
元素。可以接受与它相同的部分属性及额外的一些属性:button
id
- 菜单主题按钮的唯一标识符。
label
- 显示在菜单上的文字,例如 文件 或 编辑。
disabled
- 该布尔属性决定菜单是否被禁用。虽然可以,但很少情况需要禁止整个菜单。该属性值可以被设置为
true
或者false
。当然,后者是默认值。
accesskey
- 该属性值是用户可以按键盘激活菜单项的键值。该字母通常在菜单主题后面以下划线方式显示。Mozilla会视标签属性根据在此指定的字符给它加上下划线。因此,需要指定一个在文本中存在的字符(尽管指定的键不在文本中也能正常工作)。
menu
元素通常放置在菜单栏上,尽管这不是必需的。但是,这将出现不一样的显示结果。此处的图片展示了早期没有菜单栏的示例看起来的效果。
menupopup
元素
元素创建包括菜单命令的弹出窗口。它是一种类型的框,默认为垂直布局。如果你想要并且将menupopup
放置在一排中,你可以将它改为水平布局。通常仅有menuitem
smenuitem
s元素和
放置在menuseparator
s
中。你可以放置任何元素在menupopup
menupopup
中,但是在Macintosh中它们都会被忽略。
menuitem
元素
元素与menuitem
元素非常相似并且拥有部分相同属性。menu
id
- 菜单项的唯一标识符。
label
- 显示在菜单项上的文本,例如打开 或 保存。
disabled
- 该布尔属性值决定菜单项是否被禁止。该属性可以被设置为
true
或者false
,但默认值是后者。
acceltext
- 该值指定显示在菜单命令末尾的快捷键文本提示。但是它还没有与
menuitem
进行键的关联。我们在后面再研究如何do this later.
menuseparator
元素
没有特别的属性。它只是在两个相信的菜单元素之间创建一条水平的分割线。menuseparator
下一节,我们会学习一些更多菜单特性.