- 浏览: 410707 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (347)
- java基础 (58)
- ajax (10)
- s2sh (10)
- 版本控制 (4)
- 数据库 (34)
- 服务器 (4)
- 开发工具 (8)
- javascript (15)
- soockte (5)
- ext (2)
- 环境搭建 (7)
- struts2 (9)
- 找工作中的面试技巧 (2)
- 承接网站零活 (0)
- JNI+JONSE+OGNL (8)
- 性能优化 (4)
- Android开发 (5)
- xul (8)
- jquery (2)
- 线程 (3)
- jsp+jdbc (7)
- servlet (2)
- java对xml操作 (1)
- IO流的操作 (10)
- 项目开发前配置 (1)
- css (0)
- 上传、下载 (2)
- 知识探讨 (2)
- html (2)
- HQL (0)
- 工作技巧 (1)
- IT (1)
- Hibernate杂谈 (10)
- Spring杂谈 (35)
- DWR (5)
- JUnit测试 (3)
- EasyMock测试web (1)
- ibatis (6)
- maysql (5)
- C++ (0)
- 正则表达式(解剖) (1)
- 密码安全 (2)
- 上传 (1)
- socket (1)
- jni(java与c++结合) (1)
- jdk版本问题 (0)
- tomcat版本问题 (5)
- linux基本命令(初学) (7)
- linux项目发布 (1)
- 3年的经验总结 (1)
- 加解密 (2)
- 高级java阶段 (2)
- java内存分区 (1)
- 浏览器 (1)
- 职业规划 (1)
- 管理 (5)
- java语音 (1)
- SSH (1)
- jsp (3)
- extjs (1)
- uml (2)
- 加密 (1)
- web (2)
- Ant (1)
- 自述 (1)
- Linux (1)
- ssh源码解剖 (1)
- 代码优化 (1)
- 设计模式 (0)
- xml (2)
- JOSN (1)
- scala (0)
- hadoop (0)
- spark (0)
- hana (1)
- shior (1)
- java Word (6)
- java PDF (4)
- java Excel (0)
最新评论
-
高级java工程师:
ztao2333 写道谢谢。收藏下这个总结。呵呵
温习jdk和tomcat -
ztao2333:
大写的,不是大学的
温习jdk和tomcat -
ztao2333:
谢谢。收藏下这个总结。
温习jdk和tomcat -
the_small_base_:
你好,可以提供调用方法吗?需要的Jar,能发下源码吗?谢谢
java实现语音 -
高级java工程师:
文思涌动 写道楼主新年好。可否再传一遍给我,我没有收到, 不清 ...
s2sh整合
一、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;" onkeypress="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” onselect=”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” onselect=”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对象中,因为这些元素还在显示,只是没有尺寸而已。
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;" onkeypress="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” onselect=”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” onselect=”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对象中,因为这些元素还在显示,只是没有尺寸而已。
发表评论
-
XBL绑定组建的实例
2011-04-07 13:55 1131可以利用绑定方法创建具有复合功能的控件 1.被绑定的标签常由 ... -
mozilla中 xul里面 window 等标签使用
2011-03-31 16:50 1159XUL中可以使用的小组件( ... -
mozilla中 xul里面 window 等标签使用
2011-03-31 16:49 1234XUL是一种基于XML的语言,它是一种用来开发Firefox的 ... -
xul叫模块里面的字居中以及叫按钮靠右下角
2011-03-17 13:09 1050<window title="&des ... -
移动 计数
2011-03-02 16:21 889测 ... -
xul+css+javascript
2011-02-24 21:50 1042<?xml version="1.0" ... -
xul(一)笔记
2011-02-15 09:30 963文章分类:Web前端 这儿是使用 window.openDi ...
相关推荐
### XUL标签用法详解 #### 一、XUL文件结构与基本概念 XUL (XML User Interface Language) 是一种基于XML的语言,主要用于构建Mozilla应用的用户界面,如Firefox等浏览器插件。XUL文件的基本构成包括文件头、命名...
以下是对XUL文档中一些主要标签和属性的详细说明: 1. **XUL文件的基本结构**: - 文件扩展名为`.xul`。 - 开始通常包含XML声明`<?xml version="1.0"?>`来定义文件的版本。 - `...
XUL包含一系列的UI元素,如按钮、标签、列表框等,这些元素可以通过XML语法定义,并可以与JavaScript或CSS结合使用,以实现动态交互和样式控制。 在"Xul学习小程序"中,我们可以预见到以下核心知识点: 1. **XUL...
在XUL文件中,可以使用标签引入JavaScript代码,这里会定义调用C++组件的函数。通过window.netscape.security.PrivilegeManager.enablePrivilege()来获取必要的权限,然后使用Components.classes和Components....
在示例中,`<window>`标签包含了一个`<browser>`元素,该元素定义了一个浏览器组件,它的`src`属性指定了加载的网页URL,`type="content"`表明这是一个内容类型,而`flex="1"`意味着这个元素会占据所有可用空间。...
1. **XUL的基本结构与元素**:XUL文件通常包含一系列的XML标签,这些标签对应于界面上的不同组件,如按钮、标签、输入框等。例如,`<window>`定义了一个窗口,`<toolbar>`创建工具栏,`<menubar>`用于创建菜单栏,`...
开发firefox扩展时使用XUL文件的自动补齐acp...对XUL reference中列出的标签都可进行自动补齐, 如box标签,使用自动补齐之后只需要输入box然后按空格键即可自动补齐为 另外还有几个比较特殊的是:xul、js、css、!。
自己写的一个xul的小程序。...下载后,直接在firefox上安装,会在状态栏出现helloworld标签。 也是自己编辑本示例,将文件后缀改为zip,解压就可以看到示例的源代码。本示例支持最高firefoex3.6.8。
XUL(XML User Interface Language)是一种标记语言,用于构建跨平台的图形用户界面,尤其在Mozilla Firefox等浏览器的扩展开发中广泛使用。XUL变量组件是XUL中的一个重要概念,它们允许开发者动态地管理和使用数据...
提到“eclipse插件”这个标签,我们可以推断这个XULRunner版本可能被用于开发Eclipse集成开发环境(IDE)的插件。Eclipse作为一个高度可扩展的开发平台,支持各种语言和工具的插件。XULRunner作为其插件的一部分,...
Petra存储库包含了各种各样的插件,这些插件为Luxor添加了新的XUL标签和功能。插件系统的设计理念是让用户能够灵活地在不修改Luxor核心代码的情况下,增强其功能。这意味着开发者可以更轻松地安装、更新和管理他们的...
另一个标签 "FireFox",众所周知,是 Mozilla 的旗舰产品,它使用了相同的 XUL 和 XPCOM 技术。Firefox 的成功部分归功于其高度可定制的用户界面,而这正是 XULRunner 提供的能力。通过 XULRunner,开发者可以创建...
5. **搜索引擎优化**:内置SEO工具,如元标签编辑和友好的URL结构,以提高搜索引擎排名。 6. **插件和扩展**:支持第三方插件和模块,增强系统的功能和灵活性。 7. **内容审核**:设置内容审核流程,确保发布的质量...
"xulcD.doc"、"xul.K.doc"和"xul标签用法说明.doc"可能详细介绍了XUL的语法、标签及其用法,对于开发Firefox扩展或基于XUL的应用程序来说是重要的参考资料。 "XULRunner_Guide_v1.3.pdf"和"Introduction_to_XUL.ppt...
本文将详细讨论金山WPS Mail邮件客户端中的一个远程命令执行漏洞,该漏洞利用了Mozilla系XUL程序的特定技巧。此问题在2016年被发现并报告,影响了WPS Mail的2.2.2 2016.03.25版本,允许攻击者通过特定手段执行任意...
### Firefox插件开发教程:深入理解XUL与GUI设计 #### 概览 在现代互联网技术的推动下,浏览器插件成为了提升用户个性化体验的重要工具。对于Firefox浏览器而言,其强大的扩展性和对开发者友好的环境使得插件开发...
- **XUL命名空间**: XUL文件必须声明其特有的命名空间,以便解析器能够正确识别XUL标签。 **2.2 基本XUL概念** - **XUL布局**: XUL支持各种布局方式,包括使用盒子模型来控制元素的排列。 - **XUL窗口**: XUL文件...
这对于编写XML、HTML或XUL(Mozilla的用户界面语言)等需要大量标签的语言尤其有用。在描述中提到的链接中,作者分享了一个UserFile,包含了对XUL的自动补全支持,这将极大提高XUL开发者的编码效率。 附加组件是...
XUL是Mozilla开发的一种标记语言,用于构建跨平台的图形用户界面,特别是在Firefox浏览器中,许多早期的扩展和插件都是基于XUL构建的。然而,随着WebExtensions API的发展,Mozilla决定逐步淘汰XUL,以提高浏览器的...
该文件的详细内容可能包含XUL标签、CSS样式和JavaScript代码,这些组合起来定义了图片展示的界面布局和交互逻辑。 总结,"基于xulrunner引擎开发的一个picshow图片展示程序"利用了XULRunner的跨平台能力和丰富的UI...