大家好，我是讯享网，很高兴认识大家。

前言:

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

XUL是什么

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

基本解释:

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

好处:

xul提供了一套简易和跨平台的widget定义。节省了编程人员在开发软件时所付出的努力。
一个XUL界面一般包含以下三部分:
内容：定义使用者界面的XUL档；
Skine（皮肤）：定义程序外观的层叠样式表和图像档；
Locale（区域）：定义界面字串的DTD档（为了软件本地化）。

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>标记

5、 标签的几个属性：
(1) id 属性用作标识以便被窗体脚本引用。
(2) title 属性描述显示时将在窗体的标题栏上显示文本。
(3) orient 的属性确定窗口中元件的排布。其值有：horizontal窗体应该横过窗体水平放置；Vertical 表示元件将成一列放置
(4) xmlns=http://www.mozilla.org/keymaster/gateKeeper/there.is.only.xul 这一行声明了XUL的名空间，将它放在窗口元件表示它的所有子元件都是XUL，Mozilla内部会识别这个 URL;
(5) < !-- 其他元件写到这里 -->表示注释

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

7、 < button>的属性：
（1） id 用来表识按钮的唯一标识。
（2） class 按钮的样式表
（3） label 标签会显示在按钮上
（4） image 在按钮上显示指定路径的图片
（5） disabled 如果这个属性被设置为true,按钮就会被禁止，如果这个属性没有表示这个按钮会被启动
（6） accesskey 设置快捷键，通常是字母

8、 标签元素< label>属性：
（1） value 属性被用于制定要显示的文本
（2） Control 属性去设置关联的标签，设置control属性的值会触发与这个值对应的id的元素

10、 文本输入框的属性：< textbox>
（1） id 属性：控件的唯一标识
（2） class属性：输入框的样式表
（3） value属性：指定输入框的文本
（4） disabled属性：文本输入框是否禁用
（5） type 属性：可以将这个属性设置为password,创建一个输入框隐藏用户输入内容，通常为密码框
（6） maxlength 属性： 输入框允许输入的字符最大数量；
（7） multiline 属性： 其值若为true 表示文本框将显示多行。若为 false 文本不显示多行

11、 单选按钮< radio>的属性：
(1) id 属性：控件的唯一标识
(2) label 属性： 单选按钮的文本
(3) disabled 属性：其值可以是true或false,若为true表示按钮被禁用，反之为启 用
(4) accesskey 属性：用于选中元素的快捷键

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

13、 多选框< checkbox>属性：
（1） id 属性：控件的唯一标识
（2） checked属性：表示受否被选中，其值有true或false
（3） label 属性：指定标签的文本
（4） selected 属性：和checked属性类似，其值有true或false

14、 列表控件< listbox>属性：
描述：listbox元素用于创建多行的列表框，它的工作方法类似于在HTML中 的select元素，和< listitem>连用创建下拉列表，< listitem>相似于HTML中的< option>。
（1） id属性： 控件的唯一标识
（2） rows属性：指定一次显示几行
例子如下：

<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> 

讯享网

15、 多列列表框：
描述：列表框也支持多列。每个单元格可以有独有的内容，即使只使用文本。当用户选择列表中的一个项目时，当前的行将被选中。你不能只选中其中的一个单元格。
例子如下：

讯享网<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> 

上面例子中的< listcols>元素用来定义列字段集，< listcol>元素用来定义每列的外观，< listitem >元素用来定义一行，类似HTML中的< row>标签;< listcell>用来定义每个单元，类似HTML中的< td>标签；使用< listhead >和< listheader>来定义表头
16、 下拉列表：
描述：XUL中的下拉列表类似HTML中使用select元素创建的下拉列表。XUL中的menulist元素可以实现这种效果。
< menulist>的属性：
accesskey 属性：设置快捷键；
disabled 属性：设置控键是否被禁用;
open 属性：其值为true或false,如果为true,菜单列表显示，否则隐藏；
label属性：设置文本；
aditable属性：其值为true或false ， 如果为true表示此菜单列表可以编辑，如为false则不能编辑。

例子如下：

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

17、 进度条< progressmeter>属性：
Id 属性： 进度条的唯一标识符。
Mode属性： 进度条的类型。如果设置为determined,进度条就是确定型进行度，在任务完成时填满。如果设置为undetermined，这个进度条就是不确定型进度条。如果不指定这个属性默认为确定型。
Value 属性： 当前进度条的尺度值。只能在确定型的进度条中使用这个属性。这个值的范围为0%到100%的百分值。
例子演示：

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

18、 增加HTML元素到窗口
（1） XHTML命名空间：
描述：为了在XUL文件中使用HTML元素，必须声明要用到的XHTML命令空间。这个方法是Mozilla从XUL中区分HTML标签的。
例子演示：

<?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;>

注意事项：
1、 必须在每个标签的开始增加一个html:的前缀；
2、 标签必须用小写
3、 “双引号”必须完成所有属性值括起来。
4、 在没有内容的xml标签的末端(>)前一定要加上结束(/)；

讯享网<?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>

19、 使用定位格：< spacer>元素
描述：spacer用于在窗口中放置一片空白，它多用于用户调整窗口大小
时它可以拉伸或者收缩。
< spacer>元素的属性：
用于指定元素可以改变自身的尺寸去填充它所在的盒子(窗口)，它说明在一个盒容器的子容器中填入多少的空白空间。
例子演示：

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

20、 按钮:< button>属性：

1.Image 属性：可以通过指定URL为按钮添加图像；< button label=”帮助” image=”图片路径”/>
2.Style 属性： 在按钮上指定图像的另一个方法是使用样式表(CSS list-style-image:url(‘图片的路径’)；< button id=”find-button” label=”find” style=”list-style-image:url(‘图片路径’)”/>
3.dir 属性: 属性控制图像和文本方向。设置这个属性的值为reverse,图像将会放在文本的右边。使用normal值，或删除这个属性，图像将会放在文本左边。
4.Orient 属性： 属性用于在将图片放在文本的上面或下面。默认值时horizontal用于将图像放在文本的左或右。也可以使用值vertical将图像放在上方或下方。如果用在normal的意思时将图像放在文本的上方，而用在reverse的意思时将图像放在文本的下方。
5.crop 属性： 它可以用来裁剪元素的内容。当元素的宽度超过maxwidth时，超出的部分会去掉，变成…。不过这个属性只可以用在description和有label的元素中。其值有left,righr,none,center;
left:指超出的文本部分从文本的左部分裁剪。
Right:指超的出文本部分从文本的右边裁剪。
Center:指超出的文本部分不文本的中间裁剪。
None:指超出的不分文本不被裁减，默认值为none;

讯享网<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> 

注释：
hbox元素：用来创建一个水平方向的盒子。每个放在hbox的元素将被水平地排成一行。
Hbox属性：
align属性：控制内部元素的垂直位置，其值有start,center,end,baseline,stretch;
start 是指box里面的元素靠顶端对齐。
center 是指 box 里面的元素靠中间对其。
end 是指 box 里面的元素底端对齐。
baseline 是指 box 里面的元素按照文本底线对齐。
sretch 自动扩展
vbox元素：用来创建一个垂直方向的盒子。每个放在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> 

22、 元素属性：
Width 属性： 指定元素的宽度。
Height 属性： 指定元素的高度。
Minwidth 属性：指定元素的最小宽度。
Minheight 属性：指定元素的最小高度。
Maxheight 属性：指定元素的最大宽度。
< box>元素：通过修改orient为"horizental"，表示元素水平摆放。为"vertical" 表示元素垂直摆放。
Pack属性：
Start 对于水平box，他就是左对齐。对于竖直的box，他就是顶端对齐。
Center 居中；
End 如说是水平box，他就是右对齐。对于竖直的box，他就是底端对齐。
align 属性：
start如果是水平的box，它就是顶端对齐。如果是竖直的box，它就是左对齐。
center居中
end如果是水平的box，它就是底端对齐。如果是竖直的box，它就是右对齐。
baseline文本线对齐，只可以用在水平box上。
stretch自动扩展

23、分组框：
（1）gropbox的描述：gropbox是一个box容器，里面的元素会按照box布局规则来显示。与其他box相比，gropbox有以下特点：
1默认有边框。你可以通过修改其cess来改变边框。
2可以添加标题(caption).标题会显示在gropbox的左上方。
（2）gropbox的属性：
align:start 如果是水平的box，它就是顶端对齐。如果是竖直的box，它就是左对齐。
Center 居中；
Baseline 文本线对齐，只可以用在水平box上。
End 如果是水平box，他就是底端对齐。如果是竖直的box，他就是右对齐。
Stretch 制动扩展。
Pack属性：
Start 对于水平box，他就是左对齐。对于竖直的box，他就是顶端对齐。
Center 居中；
End 如说是水平box，他就是右对齐。对于竖直的box，他就是底端对齐。
例子演示：

讯享网<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> 

24、层和卡片：
Statck 元素：
statck 是按照绝对位置定位布局方式的容器。因此，align、pack、dir、orient等属性对于stack来说是无效的。Stack内部元素的位置取决于元素的left、top属性。这种布局模式类似于VB或Delphi的布局模式。需要注意的是：内部元素的left、top是指相对于stock的位置，而不是相对于window或者screen的位置。所谓的绝对定位，是指其直接孩子元素。非直接孩子元素不执行stack的布局逻辑。

例子演示：

讯享网<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 元素：
Deck 内的元素也是层叠在一起的，但与stack不同的是，deck 一次只显示其中的一个孩子元素。当前显示哪个孩子，是由selectedIndex属性控制的。Deck 常用于向导对话框。我们可以通过设置内部元素的left、top属性来控制其显示位置
例子演示：

<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> 

25、 分页组：
描述及语法：
tabbox用于界面元素的分页显示。常用于显示用户选项等界面元素多，界面大小有限的用户界面。用户可以通过选择不同的tab页来查看不同的内容。
xul中提供了5个元素来实现分页组
tabbox：最外层的容器，一般内部包含一个tabs和tabpanels。
tabs：tab的容器。当然你也可以在里面加入其他的xul元素来丰富导航 tab的界面。
tab：具体的每一个分页卡，用户通过选择不同的tab来切换显示页。
tabpanels：tabpanel的容器。
tabpanel：里面放置具体的页面内容。
tab与tabpanel的对应关系是按照他们在各自容器中的序号来确定的。tabs中的第一个tab对应tabpanels中的第一个tabpanel。
基本语法如下：

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

由于tabbox本身是一个容器，因此，tabs的显示位置取决于它在tabbox中的顺序以及tabbox的orient、dir属性。
tabbox的大小取决于它内部最大tabpanel的大小，因此，在切换tab页的时候，tabbox的大小不会随着tab页切换而改变。
例子演示：

<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> 

当前tab页的tab元素的selected属性是true。
如果我们将tabbox的orient设置为水平模式，tabs会出现在左面。
26、 表格：
描述：其组件包括grid，columns，column，rows和row。Grid包含排列整齐的组件就像表格一样。在grid内，可以声明columns，定义header及column属性；还可以声明rows。使用rows组件可以声明一套row，即为grid元素的子组件。每个子元素为指定列的一行。
例子演示：

讯享网<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"/> 

2、 Browser 面板:如果想见一个和浏览器一样效果的面板，使用Browser即可，其属性如下：
Src:指定要在面板中显示的页面。
Homepage:指定浏览器面板显示的主页。
Autoscroll：当autoscroll的值为true时，则激活滚
动条。当autoscroll的值为false时，
滚动条被禁用。
示例演示：

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

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

Id 属性：唯一标识符；
State属性：显示分隔条的状态，其值有open,collapsed,默认值为open;
Collapse 属性：指定当splitter的按键，被点击时哪边被折叠。若未指定此属性，splitter是不会引起折叠的(按键不会出现)。其值有none,befor,after：
None:无折叠发生；
Before:当按下键时，相同组件内的元素立即再分割器前折叠起来，这样其宽度或高度将变为0。
After:当按下键时，相同组件内的元素立即在分割器后折叠起来，这样其宽度或高度将变为0。
Resizebefore属性：当splitter改变时，指定splitter左边的那个元素必须重新调整。当splitter移动时，使用closest来重新调整最靠近splitter左边的编辑列；使用farthest来重新调整splitter最左边的编辑列。
Resizebeafter 属性：当splitter改变时，指定splitter右边的哪个元素被调整。在这个范围内，使用farthest来重新调整最右边的弹性空间；
使用closest来重新调整最靠近splitter右边的弹性空间；
使用grow来设定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>

29、 滚动条Scroll Bars属性：
Id 属性：唯一标识符。
Orient 属性：指定滚动条的方向，其值有：horizontal,vertical；
Horizontal表示水平方向；vertical表示垂直方向。
Curpos 属性：表示当前值，它应该在0到maxpos之间。缺省值是0。
Maxpos 属性：Maxpos表示最大值，缺省值是100。
Increment属性：表示增量值，缺省值是1。
Pageincrement 属性：翻页时的增量值，却省值是10；
例子演示：

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

30、 工具栏描述说明：
工具栏包含了toolbox,toolbar,toolbarbutton等元素；
例子演示：

讯享网<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。

（2） menu元素属性：
id 属性：菜单主题按钮的唯一标识符。
Label属性：显示菜单栏上的文字。
Disabled 属性：该布尔值决定菜单是否被禁用。默认为false;
Acesskey 属性：设置的快捷键。

（3） menupopup元素说明：menupopup元素创建包含菜单命令的弹出窗口。他是一
中类型的框。默认为垂直布局。如果想要将menupopup放置在一排，
你可以将它改为水平布局。通常仅有menuitems元素和menuseparators放置在menupopup中。

（4） menuitem 元素：
1、id 属性：菜单项的唯一标识符。
2、label属性： 显示菜单项的文本。
3、disabled 属性：该布尔属性值决定菜单项是否被禁止。该属性可以被设置为true或者false，但默认值是后者。
4、accesskey 属性： 该值是用户可以使用键盘激活菜单项的键值。该字母通常以下划线方式显示于菜单主题后面（即创建快捷键）。
5、acceltext 属性：该值指定显示在菜单命令末尾的快捷键文本提示。

（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、 弹出菜单：

1、例子演示：
(1) 普通弹出：当你在某个元素上按了左键会弹出来，而且它可以包含任何内容，放在任何地方。
(2) 上下文弹出：当你在某个元素上按上下文菜单按钮时弹出，通常是点右键。它可以是通过点击按钮，也可以通过按钮与鼠标的组合来调用。

讯享网<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中的元素：

1、tree元素：tree的根元素
Rows属性：rows属性控制多少行可见。通过将其设置为zero，tree控件会改变其自身大小来容纳近可能多的项目。
Seltype属性：是否允许多选，其值有：
Single：一次只能选择一行数据。
Multiple：允许其能选择多行数据。
2、treecols元素：treecol的占位元素
3、treecol元素：用于定义tree中的一个列，使用这个元素，可以加上额外的信息用于指定该列中的数据是怎么排列的,或者是否允许用户调整列的宽度. 你应该给每个列指定一个id属性,因为, Mozilla在重新排列和排序时使用id属性来标识每个列。
4、treechildren元素： 这个包含了tree的主体部分，用于显示单独的数据行。
注：
1、若组件没有包含treechildren，则它为一个不接受任何子项目的叶子节点。
2、若组件包含了treechildren，则它为一个可以可以包含其它项的分支节点。

5、treeitem 元素： 组件包含一行数据(treerow)，及可选的treechildren。
Open属性：来控制是否显示其子项目。默认为true，若为false则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 元素的属性：xul的事件处理和HTML相似。对于需要响应事件的元素，只要在元素中增加相应的事件处理函数即可。
Src 属性：脚本文件的路径。
Type 属性：使用脚本的语言，一般这个属性设为：application/x-javascript。
例子演示：

<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
1、 keyset元素：key元素的外部元素，key元素必须设置在keyset元素的内部。其属性有：
Id属性：为一标识符。
Align属性：指定了keyset内部的元素是怎样排列的，其值有start、center、end、baseline、stretch、left、
Right。
Src 属性：指定了keyset元素的css样式表的风格。
Empty 属性：如果其值设为true，表示容器元素内没有子元素。
2、 key元素：用来设置快捷键。
其属性如下：
Command属性：其值为某个元素的id名称，表示这个元属与某个元素关联。
Disabled 属性：是否被禁用，其是一个布尔值，设为true表示这个元素被禁用。
Key 属性：其值是一个字符，这是设置的快捷键的值，当这个键被按时，就会触发事件。
Keytext 属性：指定快捷键的文本。
Modifiers属性：修饰键，其值有shift、alt、control、accel；
Shif: shift键。
Alt : alt键。
Control：control键。
Keycode 属性：设定快捷键的值，和key的用法类似，其值：

VK_CANCEL VK_BACK VK_TAB VK_CLEAR
VK_RETURN VK_ENTER VK_SHIFT VK_CONTROL
VK_ALT VK_PAUSE VK_CAPS_LOCK VK_ESCAPE
VK_SPACE VK_PAGE_UP VK_PAGE_DOWN VK_END
VK_HOME VK_LEFT VK_UP VK_RIGHT
VK_DOWN VK_PRINTSCREEN VK_INSERT VK_DELETE
VK_0 VK_1 VK_2 VK_3
VK_4 VK_5 VK_6 VK_7
VK_8 VK_9 VK_SEMICOLON VK_EQUALS
VK_A VK_B VK_C VK_D
VK_E VK_F VK_G VK_H
VK_I VK_J VK_K VK_L
VK_M VK_N VK_O VK_P
VK_Q VK_R VK_S VK_T
VK_U VK_V VK_W VK_X
VK_Y VK_Z VK_NUMPAD0 VK_NUMPAD1
VK_NUMPAD2 VK_NUMPAD3 VK_NUMPAD4 VK_NUMPAD5
VK_NUMPAD6 VK_NUMPAD7 VK_NUMPAD8 VK_NUMPAD9
VK_MULTIPLY VK_ADD VK_SEPARATOR VK_SUBTRACT
VK_DECIMAL VK_DIVIDE VK_F1 VK_F2
VK_F3 VK_F4 VK_F5 VK_F6
VK_F7 VK_F8 VK_F9 VK_F10
VK_F11 VK_F12 VK_F13 VK_F14
VK_F15 VK_F16 VK_F17 VK_F18
VK_F19 VK_F20 VK_F21 VK_F22
VK_F23 VK_F24 VK_NUM_LOCK VK_SCROLL_LOCK
VK_COMMA VK_PERIOD VK_SLASH VK_BACK_QUOTE
VK_OPEN_BRACKET VK_BACK_SLASH VK_CLOSE_BRACKET VK_QUOTE
VK_HELP
事例演示：

<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、焦点和选择：

1、获取焦点或失去焦点：
Onfocus 属性：元素的onfocus属性表示这个元素获取焦点。
Onblur 属性：元素的onblur属性表示这个元素失去焦点。
Style 属性：元素的样式表，可以用style属性来控制焦点的获取和失去。
其值有：-moz-user-focus: nomal和-moz-user-focus:ignore;
前者表示获取焦点，后者表示失去焦点。
例子演示：
<label id=“focused” style="-moz-user-focus: normal;" οnkeypress=“alert(‘Label Focused’);” value=“Focus Me”/>
2、addEventListener()：这个方法用来捕获事件的处理器。其参数有三个：
参数一：事件名，参数二：事件处理函数，参数三：若为true表示不捕获冒泡消息。
3、文本选择：
Select()：用来选择文本框的文本，用法：tbox.select();
setselectionRange(int start,int end);用来选择文本框的某一范围内的文本，用法：tbox.setselectionRange(4,8);
4、命令：
例子演示：

讯享网<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列表中的所有项：

Var childNodes = document.documentElement.childNodes;
For (var I = 0; i < childNodes.length; i++) {
Var child = childNodes[i];
//…
}

修改XUL文档

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

创建新的元素

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

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

var button = document.createElement(“button”);
button.setAttribute(“label”, “A Button”);
abox.appendChild(button);

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

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

parent.appendChild(child);
parent.insertBefore(child, referenceChild);
parent.replaceChild(newChild, oldChild);
parent.removeChild(child);

通常情况下，需要移除掉已经存在的元素，以及增加一些其他的。如果是这样的话，可以再增加一个元素前不去移除掉不需要的元素。因为，在某各时刻，一个节点只会出现在一个地方。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属性。