XUL_教程/增加一些按钮

在本章，我们将学习如何向window添加button。

添加多个按钮到一个窗口

到目前为止我们创建的这个窗口里面什么也没有,因此还不算非常有趣. 在这一节中,我们将添加两个按钮, 一个“查找”按钮和一个“取消”按钮.我们还将学到一个简单的方法在窗口上来定位它们.

像HTML, XUL也有许多标记，它们被用来当作创建用户接口的元素. 最基本的一个 button 标记. 这个元素被用来创建简单的按钮。

按钮元素有两个主要的属性，一个label和一个image。你可以要一个或两个都要。因此，按钮可以只有一个标签，一个图片或标签和图片都有。通常在对话框中会使用“确定”和“取消”按钮。

按钮的语法

button标签有下面的语法要求：

<button
    id="identifier"
    class="dialog"
    label="OK"
    image="images/image.jpg"
    disabled="true"
    accesskey="t"/>

可用的属性如下，有一些是可选的:

id 

你用来标识按钮的唯一标识。你会在所有的元素中看到此属性。你可以在样式表(style)或脚本(script)中通过它来引用按钮。因此，你几乎可以在所有的元素中添加这个属性。在这个教程中它不是一直都出现在元素中（It isn't always placed on elements in this tutorial for simplicity）。

class 

按钮的样式表。在这里的用法和在HTML中是一样的。它是使用在显示按钮里面的样式。在这节中的dialog值就使用了。多数情况下，你不用在按钮上使用此属性。

label 

标签会显示在按钮上。例如，“确定”或者“取消”。如果没人设置这个参数，在按钮上就不会显示文字。

image 

在按钮上显示指定路径的图片。如果没有给出此属性，则不会显示图片。你通常可以使用如下的样式表属性list-style-image来指定要显示的图片。

disabled 

如果这个属性被设置为true，按钮就会被禁用。这样通常按钮上的文字将会显示为灰色（grey）。如果按钮被禁用，按钮上的功能就不可以被执行。如果这个属性没有设置，按钮就是启用的。你可以用JavaScript来对按钮的可用状态进行控制。

accesskey 

这个属性让你可以设置一个字母它的功能就像是一个快捷键。这个字母会被划上下划线并显示在标签里。当用户按ALT键(或者在每个平台中一个功能类似的键)的同时按下这里设置的键时，不论按钮在窗口的任何地方都能取得到焦点。

注释：按钮支持比上面列出的更多的属性。其他的属性可以参考 discussed later.

更多的按钮例子

Example 1 : Source View

<button label="Normal"/>
<button label="Disabled" disabled="true"/>

上面的这些例子是在图片里面生成按钮。第一个按钮是一个标准的按钮。第二个按钮是禁用的，所以它整个显示为灰色。

注：label属性不应该指定中文名称，否则解析xul时会报错。对于本地化，应该通过locale包来完成。

我们将从为查找文件工具创建一个简单的查找按钮开始。下面这个例子的源码显示怎么去做这件事。

<button id="find-button" label="Find"/>

例子 findfile.xul

请添加我们在前面章节创建的这些代码到findfile.xul文件。这些代码必须插入到 window 标签里面。代码是下面红色显示的部份:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
     xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" label="Find"/>
  <button id="cancel-button" label="Cancel"/>

</window>

你也可以注释掉“取消”按钮。窗口提供水平对齐地显示两个按钮。如果你在Mozilla中打开这个文件，你就可以获得和这里显示的图片一样的效果。

在下一节，我们将会学会怎么向窗口中增加标签和图片。

查看更多参考 更多按钮特性