资源描述
一、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
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
