一、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、 <window/>标签的几个属性：
(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的元素
9、 标签元属<description>描述
在没有一些特定的关联操作的文本时你可以使用 description 标签，这个元素使用于在对话框的上面或实例的一组控制的文本提示信息. 既可以在 value 属性中指定单行的文本也可以在开合标签之间填充一大块的文本
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标签的末端(>)前一定要加上结束(/)；
（3） 使用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;>
<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>属性：
Image 属性：可以通过指定URL为按钮添加图像；
<button label=”帮助” image=”图片路径”/>
Style 属性： 在按钮上指定图像的另一个方法是使用样式表(CSS list-style-image:url(‘图片的路径’)；
<button id=”find-button” label=”find” style=”list-style-image:url(‘图片路径’)”/>
dir 属性: 属性控制图像和文本方向。设置这个属性的值为reverse,图像将会放在文本的右边。使用normal值，或删除这个属性，图像将会放在文本左边。
Orient 属性： 属性用于在将图片放在文本的上面或下面。默认值时horizontal用于将图像放在文本的左或右。也可以使用值vertical将图像放在上方或下方。如果用在normal的意思时将图像放在文本的上方，而用在reverse的意思时将图像放在文本的下方。
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>
3、 文件查找对话框示范
<vbox flex=”1”>
<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>
（3） radiogroup的描述：radiogroup首先是一个box容器，里面可以放xul元素，但radiogroup对单选框(radio)有特殊意义。可以通过selectedItem 来访问选中的radio。
例子演示：
<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、 内容面板：
1、 iframe面板：iframe 的用法和html中的用法基本相同。可以在窗口嵌套一个页面，只要设置iframe的src的属性就可以了。
例子演示：
<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组件内。
7、treecell元素：treerow中的单独元素(cell)，将此元素放在treerow组件内。
(3)例子演示：
<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"/>
Xul中的内置事件有：oncommand、onkeypress、onclick、onload、onkeyup、dblclick mousedown、mouseup、mouseover、mousemove、mouseout等
例子演示：
<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。
var box = document.getElementById(“somebox”);
var flex = box.getAttribute(“flex”);
如果使用property flex时，将会是下面的情况：
var box = document.getElementById(“somebox”);
var flex = box.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。
list.insertItemAt(3, “Thursday”, “thu”);
list.removeItemAt(3);
在这里，被添加到位置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属性。
和DOM树不同，隐藏的元素并不包括在box对象中。就是说box对象会忽视掉已经隐藏掉的元素。Collapsed的元素会包含在box对象中，因为这些元素还在显示，只是没有尺寸而已。
10-06
04-28
6632
6632
04-23
4152
4152
09-11
739
739
07-17
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
