1、一、XUL 的元素及属性描述：1、 一个 XUL 文件可以有任何名字，但它必须拥有一个 .xul 的扩展名。2、 简单声明一个 XUL 文件，通常在每个 XUL 文件都会添加这一行。3、 这一行是用来指定使用的样式表的。这是 XML 用于导入样式表的语法。4、 这个标签用来描述一个窗体，每个用户界面的窗体都在一个单独的文件中描述，类似 HTML 中的 标记5、 标签的几个属性：(1) id 属性用作标识以便被窗体脚本引用。(2) title 属性描述显示时将在窗体的标题栏上显示文本。(3) orient 的属性确定窗口中元件的排布。其值有：horizontal 窗体应该横过窗体水平放置；Ver
2、tical 表示元件将成一列放置(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
3、标签会显示在按钮上（4） image 在按钮上显示指定路径的图片（5） disabled 如果这个属性被设置为 true,按钮就会被禁止，如果这个属性没有表示这个按钮会被启动（6） accesskey 设置快捷键，通常是字母8、 标签元素 属性：（1） value 属性被用于制定要显示的文本（2） Control 属性去设置关联的标签，设置 control 属性的值会触发与这个值对应的 id 的元素9、 标签元属描述在没有一些特定的关联操作的文本时你可以使用 description 标签，这个元素使用于在对话框的上面或实例的一组控制的文本提示信息. 既可以在 value 属性中指定单行的文本也
4、可以在开合标签之间填充一大块的文本10、 文本输入框的属性：（1） id 属性：控件的唯一标识（2） class 属性：输入框的样式表（3） value 属性：指定输入框的文本（4） disabled 属性：文本输入框是否禁用（5） type 属性：可以将这个属性设置为 password,创建一个输入框隐藏用户输入内容，通常为密码框（6） maxlength 属性： 输入框允许输入的字符最大数量；（7） multiline 属性： 其值若为 true 表示文本框将显示多行。若为 false 文本不显示多行11、 单选按钮的属性： (1) id 属性：控件的唯一标识(2) label 属性： 单
5、选按钮的文本(3) disabled 属性：其值可以是 true 或 false,若为 true 表示按钮被禁用，反之为启 用(4) accesskey 属性：用于选中元素的快捷键12、 单选按钮组属性：若在一个组中 只能选择一个13、 多选框 属性：（1） id 属性：控件的唯一标识（2） checked 属性：表示受否被选中，其值有 true 或 false （3） label 属性：指定标签的文本（4） selected 属性：和 checked 属性类似，其值有 true 或 false14、 列表控件属性：描述：listbox 元素用于创建多行的列表框，它的工作方法类似于在 HTML
6、 中 的 select 元素，和连用创建下拉列表， 相似于HTML中的 。（1） id 属性： 控件的唯一标识（2） rows 属性：指定一次显示几行例子如下：15、 多列列表框：描述：列表框也支持多列。每个单元格可以有独有的内容，即使只使用文本。当用户选择列表中的一个项目时，当前的行将被选中。你不能只选中其中的一个单元格。 例子如下：上面例子中的元素用来定义列字段集，元素用来定义每列的外观，元素用来定义一行，类似 HTML 中的标签;用来定义每个单元，类似 HTML 中的标签；使用和来定义表头16、 下拉列表：描述：XUL 中的下拉列表类似 HTML 中使用 select 元素创建的下拉列表
7、。XUL 中的 menulist 元素可以实现这种效果。的属性：accesskey 属性：设置快捷键；disabled 属性：设置控键是否被禁用 ;open 属性：其值为 true 或 false,如果为 true,菜单列表显示，否则隐藏；label 属性：设置文本；aditable 属性：其值为 true 或 false ， 如果为 true 表示此菜单列表可以编辑，如为 false 则不能编辑。例子如下：17、 进度条属性：Id 属性： 进度条的唯一标识符。Mode 属性： 进度条的类型。如果设置为 determined,进度条就是确定型进行度，在任务完成时填满。如果设置为 undeter
8、mined，这个进度条就是不确定型进度条。如果不指定这个属性默认为确定型。Value 属性： 当前进度条的尺度值。只能在确定型的进度条中使用这个属性。这个值的范围为 0%到 100%的百分值。例子演示：18、 增加 HTML 元素到窗口（1） XHTML 命名空间：描述：为了在 XUL 文件中使用 HTML 元素，必须声明要用到的XHTML 命令空间。这个方法是 Mozilla 从 XUL 中区分 HTML标签的。例子演示：注意事项：1、 必须在每个标签的开始增加一个 html:的前缀；2、 标签必须用小写3、 “双引号”必须完成所有属性值括起来。4、 在没有内容的 xml 标签的末端()前一
9、定要加上结束(/)；（3） 使用 HTML 元素：例子演示：A simple table19、 使用定位格：元素描述：spacer 用于在窗口中放置一片空白，它多用于用户调整窗口大小时它可以拉伸或者收缩。元素的属性：用于指定元素可以改变自身的尺寸去填充它所在的盒子(窗口)，它说明在一个盒容器的子容器中填入多少的空白空间。例子演示：20、 按钮:属性：Image 属性：可以通过指定 URL 为按钮添加图像；Style 属性： 在按钮上指定图像的另一个方法是使用样式表(CSS list-style-image:url(图片的路径 )；dir 属性 : 属性控制图像和文本方向。设置这个属性的值为 r
10、everse,图像将会放在文本的右边。使用 normal 值，或删除这个属性，图像将会放在文本左边。Orient 属性： 属性用于在将图片放在文本的上面或下面。默认值时horizontal 用于将图像放在文本的左或右。也可以使用值vertical 将图像放在上方或下方。如果用在 normal 的意思时将图像放在文本的上方，而用在 reverse 的意思时将图像放在文本的下方。crop 属性： 它可以用来裁剪元素的内容。当元素的宽度超过 maxwidth 时，超出的部分会去掉，变成. 。不过这个属性只可以用在 description和有 label 的元素中。其值有 left,righr,non
11、e,center;left:指超出的文本部分从文本的左部分裁剪。Right:指超的出文本部分从文本的右边裁剪。Center:指超出的文本部分不文本的中间裁剪。None:指超出的不分文本不被裁减，默认值为 none; 特殊按钮例子：弹出菜单按钮：”21、 箱体的基本语法：注释：hbox 元素：用来创建一个水平方向的盒子。每个放在 hbox 的元素将被水平地排成一行。Hbox 属性：align 属性：控制内部元素的垂直位置，其值有start,center,end,baseline,stretch;start 是指 box 里面的元素靠顶端对齐。center 是指 box 里面的元素靠中间对其。en
12、d 是指 box 里面的元素底端对齐。baseline 是指 box 里面的元素按照文本底线对齐。sretch 自动扩展vbox 元素：用来创建一个垂直方向的盒子。每个放在 vbox 的元素将被垂直地排成一列例子演示：1、 登陆提示范例2、 文本框对齐3、 文件查找对话框示范Enter your search criteria below and the Find button to begin the search.22、 元素属性：Width 属性： 指定元素的宽度。Height 属性： 指定元素的高度。Minwidth 属性：指定元素的最小宽度。Minheight 属性：指定元素的最小高
13、度。Maxheight 属性：指定元素的最大宽度。元素：通过修改 orient 为“horizental“ ，表示元素水平摆放。为“vertical“ 表示元素垂直摆放。Pack 属性：Start 对于水平 box，他就是左对齐。对于竖直的 box，他就是顶端对齐。Center 居中；End 如说是水平 box，他就是右对齐。对于竖直的 box，他就是底端对齐。 align 属性：start 如果是水平的 box，它就是顶端对齐。如果是竖直的 box，它就是左对齐。 center 居中 end 如果是水平的 box，它就是底端对齐。如果是竖直的 box，它就是右对齐。 baseline 文本线
14、对齐，只可以用在水平 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 如果是水平
15、box，他就是底端对齐。如果是竖直的box，他就是右对齐。Stretch 制动扩展。Pack 属性：Start 对于水平 box，他就是左对齐。对于竖直的 box，他就是顶端对齐。Center 居中；End 如说是水平 box，他就是右对齐。对于竖直的 box，他就是底端对齐。例子演示：或（3） radiogroup 的描述：radiogroup 首先是一个 box 容器，里面可以放 xul元素，但 radiogroup 对单选框(radio)有特殊意义。可以通过selectedItem 来访问选中的 radio。例子演示：24、 层和卡片：Statck 元素：statck 是按照绝对位置定位
16、布局方式的容器。因此，align、pack、dir、orient 等属性对于 stack 来说是无效的。 Stack 内部元素的位置取决于元素的 left、top 属性。这种布局模式类似于VB 或 Delphi 的布局模式。需要注意的是：内部元素的 left、top 是指相对于 stock 的位置，而不是相对于 window 或者 screen 的位置。所谓的绝对定位，是指其直接孩子元素。非直接孩子元素不执行stack 的布局逻辑。例子演示：Deck 元素：Deck 内的元素也是层叠在一起的，但与 stack 不同的是，deck 一次只显示其中的一个孩子元素。当前显示哪个孩子，是由select
17、edIndex 属性控制的。Deck 常用于向导对话框。我们可以通过设置内部元素的 left、top 属性来控制其显示位置例子演示：或25、 分页组：描述及语法：tabbox 用于界面元素的分页显示。常用于显示用户选项等界面元素多，界面大小有限的用户界面。用户可以通过选择不同的 tab 页来查看不同的内容。xul 中提供了 5 个元素来实现分页组tabbox：最外层的容器，一般内部包含一个 tabs 和 tabpanels。tabs：tab 的容器。当然你也可以在里面加入其他的 xul 元素来丰富导航 tab 的界面。tab：具体的每一个分页卡，用户通过选择不同的 tab 来切换显示页。tab
18、panels：tabpanel 的容器。tabpanel：里面放置具体的页面内容。tab 与 tabpanel 的对应关系是按照他们在各自容器中的序号来确定的。tabs 中的第一个 tab 对应 tabpanels 中的第一个 tabpanel。基本语法如下：- tab elements go here - tabpanel elements go here -由于 tabbox 本身是一个容器，因此，tabs 的显示位置取决于它在tabbox 中的顺序以及 tabbox 的 orient、dir 属性。tabbox 的大小取决于它内部最大 tabpanel 的大小，因此，在切换 tab 页的
19、时候，tabbox 的大小不会随着 tab 页切换而改变。例子演示：当前 tab 页的 tab 元素的 selected 属性是 true。如果我们将 tabbox 的 orient 设置为水平模式，tabs 会出现在左面。26、 表格：描述：其组件包括 grid，columns，column ，rows 和 row。Grid 包含排列整齐的组件就像表格一样。在 grid 内，可以声明 columns，定义header 及 column 属性；还可以声明 rows。使用 rows 组件可以声明一套 row，即为 grid 元素的子组件。每个子元素为指定列的一行。例子演示：滚动网格：当指定 height 属性且没有足够的空间来显示数据时，grid 会变为滚动的。
