xul帮助手册.docx

xul帮助手册.docx

《xul帮助手册.docx》由会员分享，可在线阅读，更多相关《xul帮助手册.docx（36页珍藏版）》请在冰豆网上搜索。

xul帮助手册

一、XUL的元素及属性描述：

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

2、

xmlversion=”1.0”?

>简单声明一个XUL文件，通常在每个XUL文件都会添加这一行。

3、

xml-stylesheethref=”chrome:

//global/skin/”type=”text/css”?

>这一行是用来指定使用的样式表的。

这是XML用于导入样式表的语法。

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

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、的属性：

（1）id用来表识按钮的唯一标识。

（2）class按钮的样式表

（3）label标签会显示在按钮上

（4）image在按钮上显示指定路径的图片

（5）disabled如果这个属性被设置为true,按钮就会被禁止，如果这个属性没有表示这个按钮会被启动

（6）accesskey设置快捷键，通常是字母

8、标签元素属性：

（1）value属性被用于制定要显示的文本

（2）Control属性去设置关联的标签，设置control属性的值会触发与这个值对应的id的元素

9、标签元属描述

在没有一些特定的关联操作的文本时你可以使用description标签，这个元素使用于在对话框的上面或实例的一组控制的文本提示信息.既可以在value属性中指定单行的文本也可以在开合标签之间填充一大块的文本

10、文本输入框的属性：

（1）id属性：

控件的唯一标识

（2）class属性：

输入框的样式表

（3）value属性：

指定输入框的文本

（4）disabled属性：

文本输入框是否禁用

（5）type属性：

可以将这个属性设置为password,创建一个输入框隐藏用户输入内容，通常为密码框

（6）maxlength属性：

输入框允许输入的字符最大数量；

（7）multiline属性：

其值若为true表示文本框将显示多行。

若为false文本不显示多行

11、单选按钮的属性：

（1）id属性：

控件的唯一标识

（2）label属性：

单选按钮的文本

（3）disabled属性：

其值可以是true或false,若为true表示按钮被禁用，反之为启用

（4）accesskey属性：

用于选中元素的快捷键

12、单选按钮组属性：

若在一个组中只能选择一个

13、多选框属性：

（1）id属性：

控件的唯一标识

（2）checked属性：

表示受否被选中，其值有true或false

（3）label属性：

指定标签的文本

（4）selected属性：

和checked属性类似，其值有true或false

14、列表控件属性：

描述：

listbox元素用于创建多行的列表框，它的工作方法类似于在HTML中

的select元素，和连用创建下拉列表，相似于HTML

中的。

（1）id属性：

控件的唯一标识

（2）rows属性：

指定一次显示几行

例子如下：

15、多列列表框：

描述：

列表框也支持多列。

每个单元格可以有独有的内容，即使只使用文本。

当用户选择列表中的一个项目时，当前的行将被选中。

你不能只选中其中的一个单元格。

例子如下：

   

   

 

 

   

   

 

 

   

   

 

 

   

   

 

 

   

   

 

上面例子中的元素用来定义列字段集，元素用来定义每列的外观，元素用来定义一行，类似HTML中的标签;用来定义每个单元，类似HTML中的标签；使用和来定义表头

16、下拉列表：

描述：

XUL中的下拉列表类似HTML中使用select元素创建的下拉列表。

XUL中的menulist元素可以实现这种效果。

的属性：

accesskey属性：

设置快捷键；

disabled属性：

设置控键是否被禁用;

open属性：

其值为true或false,如果为true,菜单列表显示，否则隐藏；

label属性：

设置文本；

aditable属性：

其值为true或false，如果为true表示此菜单列表可以编辑，如为false则不能编辑。

例子如下：

17、进度条属性：

Id属性：

进度条的唯一标识符。

Mode属性：

进度条的类型。

如果设置为determined,进度条就是确定型进行度，在任务完成时填满。

如果设置为undetermined，这个进度条就是不确定型进度条。

如果不指定这个属性默认为确定型。

Value属性：

当前进度条的尺度值。

只能在确定型的进度条中使用这个属性。

这个值的范围为0%到100%的百分值。

例子演示：

4px;”/>

18、增加HTML元素到窗口

（1）XHTML命名空间：

描述：

为了在XUL文件中使用HTML元素，必须声明要用到的XHTML命令空间。

这个方法是Mozilla从XUL中区分HTML标签的。

例子演示：

xmlversion=”1.0”>

xml–stylesheethref=”chrome:

//global/skin/”type=”text/css”?

>

Id=”findfile-window”

Title=”Findfiles”

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元素：

例子演示：

xmlversion=”1.0”？

>

xml–stylesheethref=”chrome:

//global/skin/”type=”text/css”?

>

Id=”findfile-window”

Title=”Findfiles”

Orient=”horizontal”

Xmls:

html=http:

//www.w3.org/1999/xhtml

Xmlns=http:

//www.mozilla.org/keymaster/gatekeeper/therer.is.only.xul;>

table>

tr>

td>

Asimpletable

td>

tr>

table>

19、使用定位格：

元素

描述：

spacer用于在窗口中放置一片空白，它多用于用户调整窗口大小

时它可以拉伸或者收缩。

元素的属性：

用于指定元素可以改变自身的尺寸去填充它所在的盒子（窗口），它说明在一个盒容器的子容器中填入多少的空白空间。

例子演示：

20、按钮:

属性：

Image属性：

可以通过指定URL为按钮添加图像；

Style属性：

在按钮上指定图像的另一个方法是使用样式表（CSSlist-style-image:

url（‘图片的路径’）；

url（‘图片路径’）”/>

dir属性:

属性控制图像和文本方向。

设置这个属性的值为reverse,图像将会放在文本的右边。

使用normal值，或删除这个属性，图像将会放在文本左边。

Orient属性：

属性用于在将图片放在文本的上面或下面。

默认值时horizontal用于将图像放在文本的左或右。

也可以使用值vertical将图像放在上方或下方。

如果用在normal的意思时将图像放在文本的上方，而用在reverse的意思时将图像放在文本的下方。

crop属性：

它可以用来裁剪元素的内容。

当元素的宽度超过maxwidth时，超出的部分会去掉，变成...。

不过这个属性只可以用在description和有label的元素中。

其值有left,righr,none,center;

left:

指超出的文本部分从文本的左部分裁剪。

Right:

指超的出文本部分从文本的右边裁剪。

Center:

指超出的文本部分不文本的中间裁剪。

None:

指超出的不分文本不被裁减，默认值为none;

特殊按钮例子：

red;”/>

弹出菜单按钮：

”

21、箱体的基本语法：

—horizontalelement

—Verticalelement

注释：

hbox元素：

用来创建一个水平方向的盒子。

每个放在hbox的元素将被水平地排成一行。

Hbox属性：

align属性：

控制内部元素的垂直位置，其值有start,center,end,baseline,stretch;

start是指box里面的元素靠顶端对齐。

center是指box里面的元素靠中间对其。

end是指box里面的元素底端对齐。

baseline是指box里面的元素按照文本底线对齐。

sretch自动扩展

vbox元素：

用来创建一个垂直方向的盒子。

每个放在vbox的元素将被垂直地排成一列

例子演示：

1、登陆提示范例

”>

”>

2、文本框对齐

”>

”>

3、文件查找对话框示范

EnteryoursearchcriteriabelowandtheFindbuttontobeginthesearch.

”control=”find-text”>

22、元素属性：

Width属性：

指定元素的宽度。

Height属性：

指定元素的高度。

Minwidth属性：

指定元素的最小宽度。

Minheight属性：

指定元素的最小高度。

Maxheight属性：

指定元素的最大宽度。

元素：

通过修改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，他就是底端对齐。

例子演示：

或

"/>

（3）radiogroup的描述：

radiogroup首先是一个box容器，里面可以放xul元素，但radiogroup对单选框（radio）有特殊意义。

可以通过selectedItem来访问选中的radio。

例子演示：

”/>

24、层和卡片：

Statck元素：

statck是按照绝对位置定位布局方式的容器。

因此，align、pack、dir、orient等属性对于stack来说是无效的。

Stack内部元素的位置取决于元素的left、top属性。

这种布局模式类似于VB或Delphi的布局模式。

需要注意的是：

内部元素的left、top是指相对于stock的位置，而不是相对于window或者screen的位置。

所谓的绝对定位，是指其直接孩子元素。

非直接孩子元素不执行stack的布局逻辑。

例子演示：

#C0C0C0">

white;padding-left:

1px;padding-top:

1px;"/>

grey;"/>

Deck元素：

Deck内的元素也是层叠在一起的，但与stack不同的是，deck一次只显示其中的一个孩子元素。

当前显示哪个孩子，是由selectedIndex属性控制的。

Deck常用于向导对话框。

我们可以通过设置内部元素的left、top属性来控制其显示位置

例子演示：

或