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

XUL_教程/增加标签和图像

 

 

这一章描述了向窗口中加入标签和图像的方法。另外,我们将看到如何将一些元素包含到一个组中。

文本元素

在不使用标记的情况下,你不能直接向XUL文件中插入文本,它也不会做任何显示。为了达到这个目的你使用如下两个XUL元素来完成。

标签元素

将文本加入到将文本加入到窗体中的一个最基本的方法就是使用label元素。请看下面的例子:

Example 1 : Source View

<label value="This is some text"/>

value属性被用于指定要显示的文本。这样设置的文本在显示的时候不会换行,所以适合于较短的文本。这种语法适用于多数情况中使用的标签。

如果文本需要换行,你可以如下例所示将文本放在开启和关闭元素之间:

Example 2 :

<label>This is some longer text that will wrap onto several lines.</label>

就像HTML,换行和多余的空格将被压缩为一个空格。 接下来, 我们可以在 找到怎么去控制元素的宽度 这样我们就可以很容易地控制换行。

操作(Control)属性

你可以使用 control 属性去设置关联的标签。当用户在标签上进行点击操作时,已关联的控件就会被触发。accessibility这种关联的辅助操作很重要,这样屏幕阅读器就可以对选中的文本进行语音提示。设置control属性的值会触发与这个值对应的id的元素。 Example 3 : Source View

<label value="Click here:" control="open-button"/>
<button id="open-button" label="Open"/>

在上面这个例子中,在标签上点击会使得按钮被触发。

描述(Descriptive)元素

在没有一些特定的关联操作的文本时你可以使用 description 标签。 这个元素使用于在对话框的上面或实例的一组控制的文本提示信息. 与 label 元素一样, 你既可以在 value 属性中指定单行的文本也可以在开合标签之间填充一大块的文本。在描述元素的大多数属性和文本内容的语法是与标签元素(label)是一样的。

例4 : Source View

<description>
  This longer section of text is displayed.
</description>

从内部看, 标签元素(label)和描述元素( description)是相同的。标签元素(label)用于有操作的标签,就像一个文本框(text field)。 操作属性仅仅为标签提供支持。 描述元素(description)用于其他描述性的情况,如对话框(dialog)上面的提示信息文本。

文档标签和贡献者

 此页面的贡献者: ziyunfei, 宋晓光, Suweite, Mihayinoviki, Grayson
 最后编辑者: ziyunfei,