firefox扩展开发(四) ： 更多的窗口控件

2008-06-11 17:00

标签盒子

标签盒子是啥？大家都见过，就是分页标签：

对应的代码：

1. <?xml version="1.0"?>
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
3. <window
4. id="test-window"
5. title="测试用的窗口"
6. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
7. <tabbox>
8. <tabs>
9. <tab label="第一个标签标题"/>
10. <tab label="第二个标签标题"/>
11. </tabs>
12. <tabpanels>
13. <tabpanel id="firsttab">
14. <label value="第一个标签的内容"/>
15. </tabpanel>
16. <tabpanel id="secondtab">
17. <label value="第二个标签的内容"/>
18. </tabpanel>
19. </tabpanels>
20. </tabbox>
21. </window>

每个标签盒子中的内容被包含在<tabbox>中，<tabs>下的<tab>包含标签标 题，<tabpanels>下的<tabpanel>包含每个标签的内容，按顺序和标签标题<tab>对应。

iframe

<iframe>这个标签在HTML里再熟悉不过了，在XUL中，作用和用法HTML一样，可以用来在窗口中嵌套一个网页，只要设置<iframe>的src属性即可：

1. <?xml version="1.0"?>
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
3. <window
4. id="test-window"
5. title="测试用的窗口"
6. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
7. <label value="以下为GemBlog首页…………"/>
8. <iframe id="content" src="http://blog.linuxgem.org" flex="1"/>
9. </window>

效果：

工具栏

1. <?xml version="1.0"?>
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
3. <window
4. id="test-window"
5. title="测试用的窗口"
6. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
7. <toolbox>
8. <toolbar>
9. <toolbarbutton label="&lt; 后退"/>
10. <toolbarbutton label="前进 &gt;"/>
11. <textbox id="url"/>
12. </toolbar>
13. </toolbox>
14. </window>

<toolbox>包含<toolbar>，<toolbar>包含工具栏中的元素，<toolbarbutton>表示工具栏按钮：

菜单栏

1. <?xml version="1.0"?>
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
3. <window
4. id="test-window"
5. title="测试用的窗口"
6. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
7. <menubar>
8. <menu label="文件">
9. <menupopup>
10. <menuitem label="新建"/>
11. <menuitem label="打开"/>
12. <menuitem label="保存"/>
13. <menuseparator/>
14. <menuitem label="退出"/>
15. </menupopup>
16. </menu>
17. <menu label="编辑">
18. <menupopup>
19. <menuitem label="拷贝"/>
20. <menuitem label="粘贴"/>
21. </menupopup>
22. </menu>
23. </menubar>
24. </window>

<menubar>为一个菜单栏的顶极标签，菜单栏中的每一项为一个<menu>，每一个菜单项下面的子项目，为<menupopup>下的<menuitem>，<menuseparator>为分隔符。

效果：（不知咋的，打开菜单的状态下没法抓图 :( ）