可扩展标记语言用户界面语言–XUL的定义及标签(详细)

大家好，欢迎来到IT知识分享网。

前言:

最近博主在帮国企维护一个老项目,拿到手后很苦恼,10多年前的用的技术没见过啊,前端用的是XUL,哈哈哈,刚开始也是云里雾里的,一脸懵啊,后来慢慢就步入正轨~

XUL是什么

可扩展标记语言用户界面语言。它是为了支持Mozilla系列的应用程序（如Mozilla Firefox和Mozilla Thunderbird）而开发的使用者界面标示语言。顾名思义，它是一种应用可扩展标记语言（标准通用标记语言的子集）来描述使用者界面的标记语言~

基本解释:

虽然XUL并不是一种公开的标准，但它重用了许多现有的标准和技术，包括CSS、JavaScript、DTD和RDF等。所以对于有网络编程和设计经验的人士来说，学习XUL比学习其他使用者界面标示语言相对简单。

好处:

XUL的元素及属性描述：

1、 一个 XUL 文件可以有任何名字，但它必须拥有一个 .xul 的扩展名。

2、 <?xml version=”1.0”?>简单声明一个XUL文件，通常在每个XUL文件都会添加这一行。

3、 <?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?>这一行是用来指定使用的样式表的。这是XML用于导入样式表的语法。

4、 < window>< /window>这个标签用来描述一个窗体，每个用户界面的窗体都在一个单独的文件中描述，类似HTML中的< body > < /body>标记

6、 打开窗口 window.open(url,windowname,flags) 其中url 表示文件路径，windowname 表示窗体的名字，flags 是指chrome 文档

12、 单选按钮组< radiogroup>属性：若在一个组中< radion>只能选择一个

<listbox rows="3"> <listitem label="Butter Pecan" value="bpecan"/> <listitem label="Chocolate Chip" value="chocchip"/> <listitem label="Raspberry Ripple" value="raspripple"/> <listitem label="Squash Swirl" value="squash"/> </listbox> 

<listbox> <listhead> <listheader label="Name"/> <listheader label="Occupation"/> </listhead> <listcols> <listcol flex="1"/> <listcol flex="2"/> </listcols> <listitem> <listcell label="George"/> <listcell label="House Painter"/> </listitem> <listitem> <listcell label="Mary Ellen"/> <listcell label="Candle Maker"/> </listitem> <listitem> <listcell label="Roger"/> <listcell label="Swashbuckler"/> </listitem> </listbox> 

例子如下：

<menulist label="Bus"> <menupopup> <menuitem label="Car"/> <menuitem label="Taxi"/> <menuitem label="Bus" selected="true"/> <menuitem label="Train"/> </menupopup> </menulist> 

<hbox> <progressmeter value=”50%” style=”margin: 4px;”/> <spacer fiex=”1”/> </hbox> 

<?xml version=”1.0”>
<?xml–stylesheet href=”chrome://global/skin/” type=”text/css”?>
<window 
Id=”findfile-window”
Title=”Find files”
Orient=”horizontal”
Xmls:html=http://www.w3.org/1999/xhtml
Xmlns=http://www.mozilla.org/keymaster/gatekeeper/therer.is.only.xul;>

<?xml version=”1.0”？>
<?xml–stylesheet href=”chrome://global/skin/” type=”text/css”?>
<window 
Id=”findfile-window”
Title=”Find files”
Orient=”horizontal”
Xmls:html=http://www.w3.org/1999/xhtml
Xmlns=http://www.mozilla.org/keymaster/gatekeeper/therer.is.only.xul;>
<html:table>
<html:tr>
<html:td>
A simple table
</html:td>
</html:tr>
</html:table>
</window>

< spacer flex=”1”> < button id=”find-button” label=”Find”/> 

20、 按钮:< button>属性：

<button label=”Left” image=”happy.png”></button> <button label=”Right” image=”happy.png” dir=”reverse”> <button label=”Above” image=”happy.png” orient=”vertical”></button> 

特殊按钮例子：

<button> <description value=”this is a”/> <description value=”rather strange” style=”color:red;”/> <description value=”button”/> </button> 弹出菜单按钮： <button type=”menu” label=”Device”> <menupopup> <menuitem label=”printer”></menuitem> <menuitem label=”Mouse></menutitem> <menutitem label=”Keyboard”></menupupup>” </menupopup> </button> 

21、 箱体的基本语法：

<hbox> <!—horizontal element </hbox> <vbox> <!—Vertical element </vbox> 

1、 登陆提示范例

<vbox> <hbox> <label control=”login” value=”Login: ”></label> <textbox id=”login”/> </hbox> <hbox> <label control=”pass” value=”password:”></label> <textbox id=”password” /> </hbox > <vbox> 

2、 文本框对齐

<vbox> <hbox> <vbox> <label control=”login” value=”Login:”></label> <label control=”pass” value=”Password:”></label> </vbox> <vbox> <textbox id=”login”></textbox> <textbox id=”pass”></textbox> </vbox> </hbox> <button id=”ok” label=”OK”></button> <button id=”cancel” label=”Cancel”></button> </vbox> 

<description> Enter your search criteria below and the Find button to begin the search. </description> <hbox> <label value=”Search for:” control=”find-text”></label> <textbox id=”find-text” control=”find-text”></textbox> </hbox> <hbox> <spacer flex=”1”/> <button id=”find-button” label=”Find”> <button id=”cancel-button” label=”Cancel”></button> </hbox> </vobx> 

<groupbox> <caption label="Answer"/> <description value="Banana"/> <description value="Tangerine"/> <description value="Phone Booth"/> <description value="Kiwi"/> </groupbox> 或 <groupbox flex="1"> <caption> <checkbox label="Enable Backups"/> </caption> <hbox> <label control="dir" value="Directory:"/> <textbox id="dir" flex="1"/> </hbox> <checkbox label="Compress archived files"/> </groupbox> 

<radiogroup> <radion id=”no” value=”no” label=”NO Number”/> <radion id=”random” value=”radom” label=”Random Number”/> <hbox> <radio id=”specify” value=”specify” label=”Specify Number:”/> <textbox id=”specificnumber”/> </hbox> 

例子演示：

<stack style="background-color: #C0C0C0"> <description value="Disabled" style="color: white;padding-left: 1px; padding-top: 1px;"/> <description value="Disabled" style="color: grey;"/> </stack> 

<deck selectedIndex="2"> <description value="This is the first page"/> <button label="This is the second page"/> <box> <description value="This is the third page"/> <button label="This is also the third page"/> </box> </deck> 或 <stack> <button label="Goblins" left="5" top="5"/> <button label="Trolls" left="60" top="20"/> <button label="Vampires" left="10" top="60"/> </stack> 

<tabbox id="tablist"> <tabs> -- tab elements go here -- </tabs> <tabpanels> -- tabpanel elements go here -- </tabpanels> </tabbox> 

<tabbox> <tabs> <tab label="Mail"/> <tab label="News"/> </tabs> <tabpanels> <tabpanel id="mailtab"> <checkbox label="Automatically check for mail"/> </tabpanel> <tabpanel id="newstab"> <button label="Clear News Buffer"/> </tabpanel> </tabpanels> </tabbox> 

<grid> <columns> <column label="Type"/> <column label="Content"/> </columns> <rows> <row> <label value="File:"/> <textbox width="99%"/> </row> <row> <label value="Type:"/> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)"/> <listitem label="All Files,(*.*)"/> </listbox> <button label="Browse..."/> </hbox> </row> </rows> </grid> 

滚动网格：当指定height属性且没有足够的空间来显示数据时，grid会变为滚动的。

<grid width="500px" height="130px"> <columns> <column label="Head 1"/> <column label="Head 2" align="center"/> <column label="Head 3" align="right"/> </columns> <rows> <row> <listbox mold="select"> <listitem label="Faster"/> <listitem label="Fast"/> <listitem label="Average"/> </listbox> <datebox/> <textbox rows="2"/> </row> <row> <checkbox checked="true" label="Option 1"/> <checkbox label="Option 2"/> <radiogroup> <radio label="Apple"/> <radio label="Orange" checked="true"/> <radio label="Lemon"/> </radiogroup> </row> <row> <checkbox checked="true" label="Option 1"/> <checkbox label="Option 2"/> <radiogroup orient="vertical"> <radio label="Apple"/> <radio label="Orange" checked="true"/> <radio label="Lemon"/> </radiogroup> </row> </rows></grid> 

可改变列的网格：如果想改变列的宽度，可以将columns的sizable属性的设为true。一旦允许用户进行此操作，用户可以拖动相邻列的编筐来改变列宽。

<window> <grid> <columns id="cs" sizable="true"> <column label="AA"/> <column label="BB"/> <column label="CC"/> </columns> <rows> <row> <label value="AA01"/> <label value="BB01"/> <label value="CC01"/> </row> <row> <label value="AA01"/> <label value="BB01"/> <label value="CC01"/> </row> <row> <label value="AA01"/> <label value="BB01"/> <label value="CC01"/> </row> </rows> </grid> <checkbox label="sizeable" checked="true" onCheck="cs.sizeable = self.checked"/> </window> 

分页网格：1、滚动分页：滚动可以由指定height属性来实现。分页可以由mold属性设为paging来实现。

<grid width="300px" mold="paging" pageSize="4"> <columns> <column label="Left"/> <column label="Right"/> </columns> <rows> <row> <label value="Item 1.1"/><label value="Item 1.2"/> </row> <row> <label value="Item 2.1"/><label value="Item 2.2"/> </row> <row> <label value="Item 3.1"/><label value="Item 3.2"/> </row> <row> <label value="Item 4.1"/><label value="Item 4.2"/> </row> <row> <label value="Item 5.1"/><label value="Item 5.2"/> </row> <row> <label value="Item 6.1"/><label value="Item 6.2"/> </row> <row> <label value="Item 7.1"/><label value="Item 7.2"/> </row> </rows> 

27、 内容面板：

<toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="Back"/> <toolbarbutton label="Forward"/> <textbox id="urlfield"/> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org" flex="1"/> 

<browser src="http://www.mozilla.org" type="content" flex="1"/> 

28、 分隔条splitter元素的属性：

<hbox flex="1">
<iframe id="content-1" width="60" height="20" src="w1.html"/>
<splitter collapse="before" resizeafter="farthest">
<grippy/>
</splitter>
<iframe id="content-2" width="60" height="20" src="w2.html"/>
<iframe id="content-3" width="60" height="20" src="w3.html"/>
<iframe id="content-4" width="60" height="20" src="w4.html"/>
</hbox>

<scrollbar id="identifier" orient="horizontal" curpos="20" maxpos="100" increment="1" pageincrement="10"/> 

<vbox flex="1"> <toolbox> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="Open"/> <toolbarbutton id="savesearch" label="Save"/> </toolbar> </toolbox> <tabbox> 

31、 菜单栏：

（1） menubar 元素：menubar是一个包括菜单的框。菜单栏没有特殊的属性，仅仅是一种类型的框。通过设置orient属性来确定menubar的方向，其值有vertical和horizental。

（5）menuseparator元素：menuseparator没有特别的属性。它只是在两个相近的菜单元素之间创建一条水平的分割线。

例子演示：

<toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="File" accesskey="f"> <menupopup id="file-popup"> <menuitem label="Open Search..." accesskey="o"/> <menuitem label="Save Search..." accesskey="s"/> <menuseparator/> <menuitem label="Close" accesskey="c"/> </menupopup> </menu> <menu id="edit-menu" label="Edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem label="Cut" accesskey="t"/> <menuitem label="Copy" accesskey="c"/> <menuitem label="Paste" accesskey="p" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar> 32、 滚动菜单说明： 创建滚动菜单需要使用到arrowscrollbox元素，其属性为： Orient 属性：指定滚动菜单的方向，其值有：vertical, horizenta。 例子演示： <arrowscrollbox orient="vertical" flex="1"> <button label="Red"/> <button label="Blue"/> <button label="Green"/> <button label="Yellow"/> <button label="Orange"/> <button label="Silver"/> <button label="Lavender"/> <button label="Gold"/> <button label="Turquoise"/> <button label="Peach"/> <button label="Maroon"/> <button label="Black"/> </arrowscrollbox> 

33、 弹出菜单：

<popupset> <popup id="clipmenu"> <menuitem label="Cut"/> <menuitem label="Copy"/> <menuitem label="Paste"/> </popup> </popupset> <box context="clipmenu"> <description value="Context clickmenu"/> </box> 

（3） 工具提示：当你的鼠标放在某个元素上时，会有一个弹出窗口用来显示元素的描述信息。

<button label="Save" tooltiptext="Click here to save your stuff"/> <popupset> <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;"> <description value="Click here to see more information"/> <description value="Really!" style="color: red;"/> </tooltip> </popupset <button label="More" tooltip="moretip"/> 

2、弹出对齐方式：缺省情况下弹出菜单将显示在鼠标点击的地方，但有时你可能想放在其它的位置。那么需要设置popup的position属性。position属性也可以用在menupopup上。它用来指示弹出菜单将显示在调用它的元素的相对位置。有许多种取值：after_start, after_end, before_start, before_end, end_after, end_before, end_before, start_after, start_before, overlap, at_pointer, after_pointer

34、树trees

(1) tree的描述：tree有两部分组成(列集和tree body)，列集有一些treecol的元素定义的，每个treecol元素定义一个列，每个列都出现在列的头部。第二部分是tree body，包含那些出现在tree中的数据，由treechildren标签创建。

（2）tree中的元素：

6、treerow元素： tree中的单独行，需要放置在treeitem组件内。

<tree id="tree" rows="5"> <treecols> <treecol label="Name"/> <treecol label="Description"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Item 1"/> <treecell label="Item 1 description"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2"/> <treecell label="Item 2 description"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1.1"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2.1.2"/> </treerow> </treeitem> </treechildren> </treeitem> <treeitem> <treerow> <treecell label="Item 2.2"/> <treecell label="Item 2.2 is something who cares"/> </treerow> </treeitem> </treechildren> </treeitem> <treeitem label="Item 3"/> </treechildren> </treeitem> <treeitem label="Item 3"/> </treechildren> </treeitem> </treechildren> </tree> 

xul的事件和脚本

1、添加事件处理器

<script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> 

<button label="OK"oncommand="alert('Buttonwapressed!');"/> <menuitem label="Close" accesskey="c" oncommand="window.close();"/> <button id="cancel-button" label="Cancel" oncommand="window.close();"/> 

2、 键盘快捷键

<keyset> <key id="copy-key" modifiers="accel" key="C"/> <key id="find-key" keycode="VK_F3"/> <key id="switch-key" modifiers="control alt" key="1"/> </keyset> 

3、 key事件：keypress、keydow、keyup

3、焦点和选择：

<command id="cmd_openhelp" oncommand="alert('Help');"/> <button label="Help" command="cmd_openhelp"/> <button label="More Help" command="cmd_openhelp"/> <button label="Disable"> 

DOM

DOM可以用于处理XUL元素，如获取它们的信息、修改其内容等。

DOM介绍

DOM用于XUL节点的树。XUL文件被加载时，标签被解析转换为层状的文档节点结构，每个节点对应一个标签，或者对应一段文本。DOM提供了一些方法来实现其功能。特殊的XUL元素也提供了额外的方法。

每个被加载的XUL文件将会有自己的文档，这些文档显示在window或frame中。尽管一个文档每次只关联一个window，但可以使用其他来加载额外的文档。

在Mozilla中，使用Javascript来访问和操纵DOM。各种DOM对象拥有的方法，都可以再脚本中使用。

再Javascript中，总是会有一个全局对象。全局对象的属性和方法，可以直接被引用。在一个浏览器上下文中，window是一个全局对象。全局对象对于不同的window不是相同的。每个frame所拥有的window对象也是不一样的。

当在脚本的最顶层，或者在方法的外面定义的一个方法或变量，其实就是声明了一个全局的对象。

因而，如果在一个window中访问另外一个window的变量或方法，所需要做的就是使用另外一个window的引用来访问。

alert(window.opener.getText());

每个window都有一个opener属性，这个属性存放了打开自己的另一个window。

window.open(“test.xul”, “_new”);

window的open方法返回的也是一个新window的引用。需要注意的是，open方法返回的window并没有被加载完。

在DOM说明中，并没有对window进行定义。在Mozilla中，window被当中DOM的第0层，即DOM Level 0。事实上，document在window中，可以使用window的document属性来访问。Document属性经常被直接引用，因为在window的众多属性中，document使用的频率很高。

Mozilla提供了三种主要的document，分别是HTMLDocument，XMLDocument和XULDocument。

检索元素

检索元素最常用的方法是，为元素分配一个id，之后使用document的getElementById方法。

var state = document.getElementById(‘casecheck’).checked;

在一个查找对话框中，进度条上的文字和树上的数据对于查找的文字是无效的。在查找之前，进度条必须是不可见的，使用hidden属性可以做到。

在查找对话框中，为查找按钮添加oncommand句柄来实现查找的功能。在查找功能的实现方法中，设置进度条的hidden为false，使得进度条可见。

将脚本放置在一个单独的文件里，可以有更好的效果。

XUL元素DOM

每个XUL元素拥有一些attribute，properties和children。Attribute，如flex=”1”。Property在Javascript中可以使用点语法，如element.hidden。children是指元素的child标签。DOM具有一些方法，可以用来操纵元素的attribute，properties和children。

Attribute和properties并不相同。一个attribute名并不定有相同的一个property与之对应。不过，通常情况下，是存在的。如attribute flex和property flex。有些properties，XUL需要执行一些复杂的计算。

操纵attribute的一些方法：getAttribute(name)，返回指定名字的attribute；hasAttribute(name)，返回true如果指定名字的attribute有值；setAttribute(name, value)，为指定名字的attribute赋值；removeAttribute(name)，移除指定名字的attribute。

如果使用property flex时，将会是下面的情况：

有些情况，attribute和property是有区别的。如，getAttribute(“hidden”)返回的是一个string值’true’，而property hidden返回的将会是boolean值true。

每一个XUL元素都实现了接口XULElement。一个XUL元素是一个声明在XUL namespace中的元素。XULElement接口有一些XUL元素专有的一些property和method，许多是从DOM的Element接口中继承而来的。

一个namespace是一个URI，指定了元素的类别。

浏览DOM

DOM是一个树状结构，拥有一个怀有children的root节点。使用document的documentElement property可以引用root节点。Root节点总是一个元素。在XUL中，一个元素对应一个标签。在一棵document树中还可以有text节点、comment节点等。在XUL中，root元素对应于window标签。

访问一棵document树，有一些常用的方法：firstChild，访问元素的第一个child节点；lastChild，访问元素的最后一个child节点；childNotes，获取一个元素的所有child的list；parentNode，访问一个节点的父节点；nextSibling，访问临近的下一个节点；previousSibling，访问临近的上一个节点。

遍历childNodes列表中的所有项：

修改XUL文档

DOM提供了一些方法来修改document。

创建新的元素

方法createElement可以用于创建一个新的元素。不过，需要一个参数，即标签的名字。然后，可以使用方法setAttribute来设置元素的属性。并且，使用方法appendChild可以将元素挂载到其他的元素中。

var abox = document.getElementById(“abox”);

方法createElement会创建一个默认的元素。默认值得的是，在XUL文档中，一个XUL元素会被创建。有一个方法，即createElementNS，可以创建不同namespace的元素。

有三各和appendChild相近的方法是：insertBefore，replaceChild，removeChild。

通常情况下，需要移除掉已经存在的元素，以及增加一些其他的。如果是这样的话，可以再增加一个元素前不去移除掉不需要的元素。因为，在某各时刻，一个节点只会出现在一个地方。Inserting操作将会先将原有的节点从其位置中移走。

方法cloneNode可以复制一个元素。这个方法有一个boolean类型的参数，用于标识是否级联拷贝元素的所有子元素。如果参数值设置为true，则复制所有子元素；参数值为false，仅复制所指定的元素。

有一些元素，如listbox和menulist提供了一些额外的专门的修改方法。

操作基本的元素

XUL中比较基本的元素，如buttons、checkboxes和radio buttons，使用脚本properties可以对其进行操纵。常用的一些properties包括：label，value，checked和disabled。这些properties可以设置或修改对应的attributes。

<button label=”hello” oncommand=”this.label=’goodbye’;”/> 

同样，textbox也可以这样应用：

<button label=”Add” oncommand=”this.nextSibling.value+=’1’;”/> 

Checkboxes有一个checked property，可以用于勾选和取消对checkbox的勾选。

<button label=”change” oncommand=”this.nextSibling.checked=!this.nextSibl ing.checked;”/> <checkbox label=”check for messages”/> 

Radio buttons拥有property selected，可以用于设置radio button是否被selected。在一组radio buttons中，有一个radio button被选中，其他的radio button就没有被选择。Radiogroup有一个property selectedIndex，可以用于操纵对radio button的选择。

有时需要使得一个元素暂时不可用，property disabled可以做到。

<script> Function updateState() { Var name=document.getElementById(“name”); Var sindex=document.getElementById(“group”).selectedIndex; If(index==0) name.disabled=true; Else name.displaed=false; } </script> <radiogroup id=”group” οnselect=”updateState();”> <radio label=”random name” selected=”true”/> <hbox> <radio label=”specify a name”/> <textbox id=”name” value=”Jim” disabled=”true”/> </hbox> </radiogroup> 

这里，第二个radio在元素hbox中，但也是radiogroup的一部分。

操纵list

XUL列表提供一些专门的方法。

List的操纵

元素listbox提供了许多方法来操纵和检索项。操纵listbox有些标准的方法，但推荐使用专门的listbox方法。因为更简单。

方法appendItem用于附加一个新的项到list的末尾。

<script> Function addItem() { Document.getElementById(‘thelist’).appendItem(‘Thursday’, ‘thu’); } </script> <listbox id=”thelist”/> <button label=”add” oncommand=”addItem();”/> 

在方法addItem中，有两各参数，分别是label和value。Value其实是可选的。

同样地，对list操纵的方法还有，insertItemAt和removeItemAt。

在这里，被添加到位置3的项其位置为3，之前位置为3的项其位置变为4。在list中，第一个项的位置为0。

这里的三个方法其实声明在接口nsIDOMXULSelectControlElement中，实现了该接口的元素还有menulist，radiogroup和tabs元素。

List的选择

接口nsIDOMXULSelectControlElement提供了两个额外的properties，是selectedIndex和selectedItem。在menulist中，selectedItem会是一个menuitem。如果没有被选中的项，selectedIndex会返回-1，而selectedItem会返回null。

<listbox id=”thelist” οnselect=”alert(this.selectedItem.label);”> <listitem label=”short”/> <listitem label=”medium”/> <listitem label=”tall”/> </listbox> 

同样地，select事件也会发生在radiogroup和tabs元素中。Menulist并不会触发select事件。command事件会被menulist触发。

对于tabs，元素tabbox的方法会被使用。元素tabbox有一些常用的方法：selectedIndex，selectedTab，selectedPanel。

Listboxes也支持多选和接口nsIDOMXULMultiSelectControlElement中的功能。这个接口提供了一些专门的方法来处理多选情况。如，property selectedItems，selectedCount。当心在遍历处理list时，list本身会改变以及一些属性会返回和之前不同的值。

删除所有被选择的项：

<script> Function deleteSelection(){ var list=document.getElementById(‘thelist’); var count=list.selectedCount; while(count--){ var item=list.selectedItems[0]; list.removeItemAt(list.getIndexOfItem(item)); } } </script> <button label=”delete” oncommand=”deleteSelection();”/> <listbox id=”thelist” seltype=”muleiple”> <listitem label=”cheddar”/> <listitem label=”Cheshire”/> <listitem label=”edam”/> <listitem label=”gouda”/> <listitem label=”havartie”/> </listbox> 

对于选择的项，还有一些其他的方法：addItemToSelection添加一个新的项，removeItemFromSelection移除一个项。

List滚动条

在listbox中，如果有更多的行需要显示，一个滚动条会出现，便于用户滚动列表。使用listbox的一些方法，可以调改滚动条的位置。

方法scrollToIndex用于滚动到指定的行。Listbox会滚动，然后所指定的行会被置于可见处的第一行，除非所指定的行处于列表内容的底部。

方法ensureIndexIsVisible类似，滚动也是为了显示某一行。不过，当所指定的行处于可见区域时，就不再须滚动到第一行中。

方法ensureItemIsVisible也有相同的效果。

Box对象

box对象用于放置显示区域和布局。

关于Mozilla布局

Mozilla中划分中两种类型的树，一是内容树，二是布局树。内容树存储节点为在源程序中见到的那样。布局树存储着一棵节点树，这棵树的每个节点可以被显示。

DOM通常被用于获取和修改文档结构或内容的信息。

布局对象具有更多的小片信息：如标签名字、元素的attributes、各种CSS properties、元素周围的元素和布局对象，以及和元素相关的XBL。

除非修改了元素的样式，否则大多XUL元素都会使用box布局对象，或其子类型的布局对象。其实所有XUL元素都是box类型。Box有大约25种子类型，为专门的XUL元素所使用。有些子类型，如stack或listbox需要更多复杂的布局。其他的，如button等只须简单的基本box就可以。

和一个元素相关的布局对象可以被移除。CSS的display property会被使用到。如，修改button元素的display property为block，会促使button元素的布局对象被移除，block对象会被创建。结果，也就改变了元素的显示和方法。

布局对象如何构建的细节其实并不须要更多的了解。

Box对象

XUL提供了一些有有用的辅助对象，叫做box对象。Box对象可以提供一些布局相关的信息。

Box对象有一些子类型，不过用的多的只有少数。Box或接口BoxObject有些properties比较有用。

基本的box对象有两个有用的特性。一是，检索XUL元素的位置和尺寸；二是，决定元素的顺序。

Box对象提供了四个properties：x，y，width和height，用于决定元素的位置和尺寸。其中x和y是相对于document的左上角，并不包括window的border和title。单位是像素pixels。另外的width和height使用单位也是pixels，表示的是元素的宽度和高度，不过包含CSS的padding和border在内。

当元素被移动或者伸缩时，关于位置和尺寸的值就会有所变动。

Width和height attribute可以用于指定一个元素的宽度和高度。检索这些properties的值会返回并得到元素的尺寸，如果已经有显示地指定的话。在之前如果没有设置值的话，这些properties会返回一个空的string值。也就是说，不能获取当前的尺寸，除非使用box对象的properties。

元素的width和height properties返回已经设置的值，而box对象返回当前的值。

Attribute hidden会隐藏掉元素，使之不显示出来。这些位置和尺寸的值就会为0，因为被隐藏而没有显示出来的缘故。元素也不会有位置和尺寸。

如果hide或collapse掉label，则元素就被当作被hidden掉。

XUL Element顺序

Box对象也可用于确定元素的显示顺序。

Box对象有一些properties：firstChild，lastChild，nextSibling、previousSibling和parentBox。Box对象没有childNodes属性。