Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

分组框

    本章介绍在组框中添加元素的方法。

Groupboxes

Edit section

    HTML 通过了 fieldset 元素来使元素分组,一般的会在元素的边上画一个框来显示元素的关系。比如一系列单选按钮。XUL 也通过了 groupbox 元素来完成相似的功能。

    就像名字暗示的一样 groupbox 是一类box,这意味着在其中的元素可以安装box指定的形式排列。与一般的box相比groupbox有两点不同。

  • 默认的组框会画出边界,你可以使用 CSS 来改变这种行为。
  • groupbox 支持在边框顶部画出标题。

    因为组框是一种box,你可以使用如 orient flex 等属性。你可以把任何你想放入box中的元素放入组框中,无论他们有什么关系。

    组框顶端的标签使用 caption 元素创建,类似于 HTML 中的legend 元素,请把 caption 作为第一个元素放入组框。

一个组框的例子

Edit section

    下面的例子显示一个简单组框。

Example 1  : Source View

Image:titledbox1.png
<groupbox>
  <caption label="Answer"/>
  <description value="Banana"/>
  <description value="Tangerine"/>
  <description value="Phone Booth"/>
  <description value="Kiwi"/>
</groupbox>

    以上代码表示:四条文本被一个以 Answer 为标签的box框起来,注意组框默认的定向方式为垂直定向,所以元素会排成一列。

更复杂的标题

Edit section

    你可以在 caption 元素中添加子元素构造一个更复杂的标题,比如,Mozilla的字体选择面板使用一个下拉菜单作为标题。尽管任何元素都可以在这里使用,通常的是使用下拉菜单和复选框。

Example 2  : Source View

Image:groupbox2.png
<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>


    这个例子里一个 checkbox 被作为标题。我看可以根据复选框是否被选中,使用脚本来控制组框中的元素是否有效。组框中包含了一个有 label textbox 的水平框,文本框和组框均被设定为是可变的,所以元素会随着窗口延伸。复选框出现在组框底下是因为组框默认为垂直定向。下一章我们为find files 对话框添加一个组框。

单选组

Edit section

    你可以使用 radiogroup 把单选按钮组织在一起。 radiogroup 是一种box,你可以在其中放置任何元素,并且他对 radio 按钮具有特殊的处理。

    那些放在单选组里的单选按钮会被组织起来,即使它在其他的box中 。也可添加额外的元素,如下例:

Example 3  : Source View

<radiogroup>
  <radio id="no" value="no" label="No Number"/>
  <radio id="random" value="random" label="Random Number"/>
  <hbox>
    <radio id="specify" value="specify" label="Specify Number:"/>
    <textbox id="specificnumber"/>
  </hbox>
</radiogroup>

    注意 radiogroup 不会画出边框。如果需要边框及标题请放置在 groupbox 中。

    接下来,我们使用学到的新知识来为findfile对话框添加元素。(additional elements to the find files dialog.)

 

« Previous Next »

  

 

 

文档标签和贡献者

 此页面的贡献者: ziyunfei, alzhu
 最后编辑者: ziyunfei,