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

image:Buttons1.png
<button label="Normal"/>
<button label="Disabled" disabled="true"/>

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

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

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

<button id="find-button" label="Find"/>
注释:Firefox不允许你从网页上打开chrome,因此查看教程中的链接时会显示在一个标准的浏览器窗口中。至此,按钮会显示在窗口中间并自动伸展。你可以增加align="start"到window标签阻止其自动伸展。
例子 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="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

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

</window>
Image:buttons2.png

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

 

注解:我们不能直接在XUL文件中写文本标签。我们可以使用 实体替换这样文本可以很容易地进行翻译.

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

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

文档标签和贡献者

标签: 
 此页面的贡献者: ziyunfei, 宋晓光, Suweite, Ff2100, Gamlty, Xxxxxx
 最后编辑者: ziyunfei,