mozilla中 xul里面 window 等标签使用

[color=indigo]XUL中可以使用的小组件(widgets)

1. 根元素

在XUL文档中，根据不同的目的应使用不同的根元素，常见的根元素包括window元素、page元素和dialog元素。

根元素使用windowtype属性作为窗口类型的任意标识符，例如Firefox为浏览器窗口使用windowtype属性 navigator:browser，为选项对话框使用windowtype属性Browser:Preferences。有了这些值，我们就可以调用这 些窗口了。

窗口在屏幕上的尺寸和位置是用属性width、height、screenX、screenY来指定的，它们都用像素为单位。通过前面提到的 persist属性，你可以轻松地保存一个窗口的尺寸和位置，Firefox也是这么做的。

一般的根元素
* window：用来定义普通窗口。Firefox的浏览器窗口、书签管理器的窗口和很多其它窗口都是用window元素定义的。一般情况下你都可以使用 windows元素作为你的根元素。
* page：在嵌入式框架中打开的侧边栏面板和其它XUL文档都使用page元素作为根元素。除了预期目的不同外，page元素和window元素没有区 别。

对话窗口的根元素
* dialog：需要创建选项对话框、确认对话框等等时，应该使用dialog元素作为根元素。dialog元素有许多属性，通过这些属性可以轻松地使用和 当前平台风格一致的小组件来显示控件(按钮等等)。例如，Windows把确认按钮放在左边，把取消按钮放在右边，而Mac OS X中的布局正好相反。
* 对话窗口中使用的按钮：dialog元素会在它的底部显示一些按钮，包括accept按钮(确认按钮)、cancel按钮(取消按钮)、help按钮(帮 助按钮)、disclosure按钮(扩展按钮，显示为一个三角形或者按钮，允许用户用它来切换附加信息的显示)。还有两个特殊的按钮extra1和 extra2，它们的名字是在根元素中通过buttonlabelextra1和buttonlabelextra2属性指定的，其值可以是任意字符串。

dialog的测试代码：
<?xml-stylesheet href="chrome://global/skin/"?>
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="chinakr's Dialog" buttons="accept,cancel"
ondialogaccept="saveValues(); window.close();"
ondialogcancel="window.close();">
<checkbox label="My Option"/>
</dialog>
复制代码
注：对话框的标题和复选框显示正常，确定和取消按钮显示不正常、工作不正常。根据注解的说明，只有在这个例子作为Firefox代码的一部分或者已安装的 扩展的代码的一部分时，才能正常工作。

2. 菜单

多级结构化下拉菜单是用户界面的一部分，通过它你就可以访问应用程序和Web服务中经常访问的功能。以前你必须使用HTML和JavaScript代码来 编写这个菜单，但在XUL中你只需要使用标签就可以完成同样的工作。

menu元素的测试代码：
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
<menu label="My Menu">
<menupopup>
<menuitem label="Item 1"/>
<menuitem label="Item 2"/>
<menuseparator/>
<menuitem label="Item 3"/>
<menu label="Submenu">
<menupopup>
<menuitem label="Item 4.1"/>
<menuitem label="Item 4.2"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
</window>
复制代码
注：如果不使用menupopup标签，那么菜单项目将平铺排列。

通过把menu元素插入menubar元素中可以创建多个菜单。通过在menuitem元素中添加class="menuitem-iconic"，你可 以在菜单中显示图标。

在选中菜单项目时执行命令

和动态HTML很像，当一个菜单项目被选中时，XUL文档也是使用事件处理程序来执行一条命令。在HTML中我们使用onclick事件处理程序来响应鼠 标输入，用onkeypress事件处理程序来响应键盘输入。XUL除了可以使用这两个事件处理程序，还可以使用oncommand这个特殊的事件处理程 序，例如通过单击左键进行选择。oncommand事件处理程序除了可以在菜单项目元素中使用，还可以在按钮和其它输入控件中使用。

oncommand事件处理程序的例子(oncommand.xul)：
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
<menu label="My Menu">
<menupopup>
<menuitem label="Open QB Homepage" oncommand="loadURI(this.value)"
value="http://QuickBest.com.cn/"/>
<menuitem label="Item 1"/>
<menuitem label="Item 2"/>
<menuseparator/>
<menuitem label="Item 3"/>
<menu label="Submenu">
<menupopup>
<menuitem label="Item 4.1"/>
<menuitem label="Item 4.2"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
</window>
复制代码
注：测试代码没有成功，因为鼠标移动到“Open QB Homepage”菜单项目上时、单击这个菜单项目时，都没有反应，没有像预想的那样打开清北服务网站的主页。

特殊菜单项目：和HTML中的input元素一样，通过设置元素的type属性，menuitem元素可以像复选框、单选按钮一样工作。
* 复选框：可以为menuitem元素添加type="checkbox"，这样当它被选择时就会被选中，当它再次被选择时就不会被选中。Firefox的 “查看”菜单中的“状态栏”菜单项目就是复选框的一个例子。当一个复选框被选中时，checked="true"属性就会被设置。
* 单选按钮：可以为多个menuitem元素添加type="radio"，同时通过设置相同的name属性来把它们分为一组，这样选中其中一个元素时，就 会取消对同组其它元素的选择，这和HTML中的单选按钮是一样的。Firefox的“查看”菜单中的“字符编码”子菜单就是单选按钮的一个例子。当一个单 选按钮被选择中，selected="true"属性就会被设置。
* 上下文菜单：context属性用来显示一个上下文菜单或快捷键菜单，当在一个元素上单击右键时就会出现这种菜单。
* 按钮：用户可以点击的按钮是用button元素来定义的。使用icon属性来代替image属性，可以显示一组当前平台的标图按钮图标。icon属性有效 的取值为：accept、cancel、help、open、save、find、clear、yes、no、apply、close、print、 add、remove、refresh、go-forward、go-back、properties、select-font、select- color。
* 工具栏按钮：toolbarbutton元素被用来定义工具栏按钮。这种按钮一般被放置在工具栏内部，但也可以放在其它地方。通过设置工具栏按钮的 type属性，可以改变元素的行为。允许的取值包括：checkbox、menu和menu-button。当指定了type="checkbox"，单 击按钮时它会凹陷，再次单击时它会弹出。凹陷状态时checked="true"被设置。像历史和书签按钮就是这类按钮。当指定了 type="menu"，并且添加了一个menupopup子元素或设置了popup属性来引用一个弹出菜单，当按钮被按下时就会显示一个弹出菜单，单击 按钮不会触发事件，选中弹出菜单的菜单项目才会触发事件。标签栏右边缘的列出所有标签页按钮就是这类按钮。当制定了type="menu- button"，就会得到一个结合了普通工具按按钮和带有type="menu"的工具栏按钮的特殊的按钮，这样点击按钮本身会触发一个命令事件，点击按 钮右侧的下拉箭头会弹出菜单。像前进、后退按钮就是这类按钮。

复选框的例子(menu.xul的测试代码)：
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
<menu label="My Menu">
<menupopup>
<menuitem label="Item 1" type="checkbox"/>
<menuitem label="Item 2"/>
<menuseparator/>
<menuitem label="Item 3"/>
<menu label="Submenu">
<menupopup>
<menuitem label="Item 4.1"/>
<menuitem label="Item 4.2"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
</window>
复制代码

单选按钮的例子(menu.xul的测试代码)：
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
<menu label="My Menu">
<menupopup>
<menuitem label="Item 1" type="checkbox"/>
<menuitem label="Item 2"/>
<menuseparator/>
<menuitem label="Item 3"/>
<menu label="Submenu">
<menupopup>
<menuitem label="Item 4.1" name="test_radio" type="radio"/>
<menuitem label="Item 4.2" name="test_radio" type="radio"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
</window>
复制代码

上下文菜单的例子(menu.xul的测试代码)：
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="Send" oncommand="send();" context="button-context"/>
<menupopup id="button-context">
<menuitem label="Send with new tab" oncommand="sendInNewTab();"/>
</menupopup>
</window>
复制代码

按钮的例子(menu.xul的测试代码)：
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="确定" icon="accept"/>
</window>
复制代码

工具栏菜单的例子(toolbarbutton.xul的测试代码)：
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox>
<toolbarbutton label="normal"/>
<tootbarbutton label="checkbox" type="checkbox"/>
<toolbarbutton label="menu" type="menu">
<menupopup>
<menuitem label="item1"/>
<menuitem label="item2"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="menu-button" type="menu-button">
<menupopup>
<menuitem label="item3"/>
<menuitem label="item4"/>
</menupopup>
</toolbarbutton>
</hbox>
</window>
复制代码

以上为“Chapter 3: Introduction to XUL—How to build a more intuitive UI”的学习笔记的第二部分。[/color]