firefox扩展开发(三) ： 排列窗口控件II

盒子内的布局

当我们把上面的窗口拖大，窗口控件还是停留在窗口的左边，留下右边一大片空白，这似乎不是我们想要的效果：

我们可以在<vbox>或<hbox>中的pack属性来控制，pack有3种值：

1. start：对vbox来说，是盒内全部靠上，对hbox，就是盒内全部靠左。
2. center：盒内居中。
3. end：vbox是靠下，hbox是靠右。

这里，我们还要介绍一个flex属性，默认情况下，盒子的大小是不变的，等于盒内元素的总大小，但是当flex属性为"1"时，盒子的大小是随着窗口的增大而增大，这样才能通过设置pack属性控制盒内的布局：

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. <vbox>
8.    <hbox pack="center" flex="1">
9.    <vbox>
10. <label value="用户名:"/>
11. <label value="密码:"/>
12.    </vbox>
13.    <vbox>
14. <textbox id="login"/>
15. <textbox id="pass"/>
16.    </vbox>
17.    </hbox>
18.    <hbox pack="center" flex="1">
19.    <button id="ok" label="登录" />
20.    <button id="cancel" label="取消" />
21.    </hbox>
22. </vbox>
23. </window>

这样就实现了居中：

分组窗口控件

有的时候，窗口中一部分空间是相互关联的，为了表示出这种关联关系，要用到<groupbox>：

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. <groupbox>
8.    <caption label="9月20日是……？"/>
9.    <label value="植树节"/>
10.    <label value="爱牙日"/>
11.    <label value="中秋节"/>
12.    <label value="元宵节"/>
13. </groupbox>
14. </window>

显示效果：

<caption>的值，就是分组标签标题的值，<caption>甚至可以包含其他的控件：

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. <groupbox>
8.    <caption>
9.    <checkbox label="Enable Backups"/>
10.    </caption>
11.    <hbox>
12.    <label control="dir" value="Directory:"/>
13.    <textbox id="dir"/>
14.    </hbox>
15.    <checkbox label="Compress archived files"/>
16. </groupbox>
17. </window>

显示效果：