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

盒子内的布局

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



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

start：对vbox来说，是盒内全部靠上，对hbox，就是盒内全部靠左。

center：盒内居中。

end：vbox是靠下，hbox是靠右。

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

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window

id="test-window"

title="测试用的窗口"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox>

<hbox pack="center" flex="1">

<vbox>

<label value="用户名:"/>

<label value="密码:"/>

</vbox>

<vbox>

<textbox id="login"/>

<textbox id="pass"/>

</vbox>

</hbox>

<hbox pack="center" flex="1">

<button id="ok" label="登录" />

<button id="cancel" label="取消" />

</hbox>

</vbox>

</window>

这样就实现了居中：

分组窗口控件

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

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window

id="test-window"

title="测试用的窗口"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<groupbox>

<caption label="9月20日是……？"/>

<label value="植树节"/>

<label value="爱牙日"/>

<label value="中秋节"/>

<label value="元宵节"/>

</groupbox>

</window>

显示效果：



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

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window

id="test-window"

title="测试用的窗口"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<groupbox>

<caption>

<checkbox label="Enable Backups"/>

</caption>

<hbox>

<label control="dir" value="Directory:"/>

<textbox id="dir"/>

</hbox>

<checkbox label="Compress archived files"/>

</groupbox>

</window>

显示效果：