在XUL,你可以增加标签,使用 description或 label 元素. 你可以在可能是使用这些元素. 可是,它不会回绕文本称为多行.你也能够增加标签到控制,也可以在HTML中使用 label 元素, 或者你可以简单地访问本在另一个HTML块中 (such as p or div) .
Example 2.5.1: Source View
Search for:
这个代码将生成文本 Search for: 以供显示,后随一个输入元素和 OK 按钮. 注意,XUL按钮可以出现在HTML元素之内. This is true of all XUL elements. feel free to intermix them as you need to. There is one restriction however Plain text will only be displayed when placed inside an HTML element that would normally allow you to display text (such as a p tag). Text outside of one will not be displayed, unless the XUL element the text is inside allows this (the description element, for example). The examples below may help.
HTML元素例子
What follows are some examples of adding HTML elements to windows. In each case, the window and other common information has been left out for simplicitiy.
1. 含有复选框的对话框
Example 2.5.2: Source View
Click the box below to remember this decision.
Remember This Decision
In this case, one p tag was used to place the text in and another was used to break apart the text into multiple lines.
2. 在HTML块之外的文本
Example 2.5.3: Source View
Would you like to save the following documents?
Expense Report 1
What I Did Last Summer
就像图中展示的, 在 div 标记内的文本被显示,但是其他的文本(Expense Report 1 and What I Did Last Summer) 不显示. 这是因为没有可以显示文本的HTML或XUL元素 包住这个文本. 要使这个文本出现,你应当放在 div 标记内,或者用 description标记围住.
3.无效的HTML元素
Case 1
Case 2
All three of the cases above will not display, each for a different reason. Note that the entire window will not display if an error occurs.
Case 1: po is not a valid HTML tag and Mozilla has no idea what to do with it.
Case 2: div is valid but only in HTML. To get it to work, you will need to add the html: qualifier.
Case 3: A description element is only valid in XUL and not in HTML. It should not have the html: qualifier.
增加元素到查找文件对话框
让我们增加更多的文本到我们的查找文件对话框.下面,, well add some descriptive text before the label we added earlier. This text will appear across the top of the dialog. Well also add a div tag to split the elements onto a separate line.
Enter your search criteria below and select the Find button to begin
the search.
Notice in the image how it is split into two lines between the descriptive text and the textbox label.
You may have noticed that we haven been too concerned about specifying the positions and sizes of the elements. Normally, this will be handled automatically. Take a look at the find files dialog now as in the image above. You will noticed that the four elements have been laid out from left to right. First the label, then the textbox and then the two buttons. The window has also sized itself to fit the elements inside it. Each time we added a new element, the window will grow to fit its elements. Well discuss methods of sizing elements and laying out a window in more detail in a later section.
Soon, well get rid of this change and use XUL elements only.
(Next) Next, well learn how to adding spacing between elements.
Examples: 2.5.1 2.5.2 2.5.3
XUL Tutorial - 2.5 - Adding HTML Elements
Previous Contents Reference Next