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

Группирующие элементы

В этом разделе рассказывается, как объединять элементы с помощью группирующей рамки.

Группирующая рамка

Язык HTML предоставляет элемент fieldset, с помощью которого можно объединять элементы в группы. Обычно, вокруг группы рисуется рамка, отражающая связь между элементами. Примером может служить группа из нескольких флажков. В языке XUL для тех же целей предлагается использовать элемент groupbox.

Как видно из названия, groupbox — ни что иное как разновидность бокса. Это значит, что элементы внутри него будут выравниваться по правилам боксов. Есть два различия между группирующей рамкой и обычными боксами:

  • По умолчанию вокруг нее рисуется рамка со скошенными углами. Это поведение всегда можно изменить используя CSS.
  • Группирующая рамка может содержать заголовок, который располагается над верхней границей рамки.

Так как группирующие рамки являются видом боксов, для них можно использовать атрибуты присущие обычным боксам, например orient и flex. Вы можете помещать внутрь группирующей рамки любые элементы, хотя обычно они должны быть чем-то связаны.

Поместить метку на верх группирующей рамки можно с помощью элемента caption. Этот элемент во многом похож на legend из HTML. Достаточно поместить один элемент caption в качестве первого дочернего элемента.

Ниже приведен простой пример группирующей рамки:

Пример: Простая группирующая рамка

Исходный код View

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

В результате будут выведены четыре обведенные рамкой строки с меткой Answer. Обратите внимание, что по умолчанию группирующая рамка выстраивает элементы вертикально, это нужно для того, чтобы получился столбец из текстовых элементов.

Вы так же можете добавлять в элемент caption вложенные элементы, чтобы сделать его более разнообразным. Например, панель выбора шрифта в Мозиле использует в качестве заголовка выпадающее меню. Любые другие элементы так же могут быть включены в заголовок, скорее всего вам пригодятся флажки и выпадающие списки.

Группирующая рамка с флажком в заголовке

Исходный код 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. Можно написать скрипт, помечающий содержимое группирующей рамки активным или неактивным в зависимости от состояния флажка. На примере группирующая рамка содержит горизонтальный элемент box с элементами label и textbox внутри. Оба элемента textbox и groupbox были сделаны эластичными, и текстовое поле в результате может менять ширину вместе с окном. Дополнительный флажок появился снизу текстового поля потому, что у группирующей рамки вертикальная ориентация элементов. В следующем разделе мы добавим группирующую рамку в наше диалоговое окно поиска файлов.

Группы радиокнопок

Чтобы сгруппировать несколько радиокнопок, воспользуйтесь элементом radiogroup. Элемент radiogroup является типом бокса. Вы можете помещать в него любые элементы, и все они, кроме элементов radio, будут вести себя так же, как и внутри обычных боксов.

Любые радиокнопки, содержащиеся в элементе группы, будут объединены друг с другом, даже если они находятся внутри еще каких-либо элементов. Это полезно при добавлении разных элементов, придающих группе кнопок дополнительную структуру. Этот прием отражен в следующем примере:

Исходный код 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, чтобы появилась рамка, и можно было добавить заголовок.

Далее, используя только что полученные знания, мы добавим еще немного элементов в наш пример поискового диалога.

Метки документа и участники

 Внесли вклад в эту страницу: Lusever, Dionys, JPEG
 Обновлялась последний раз: Lusever,