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>为分隔符。

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