Руководство по XUL:Группирующие элементы
Материал из MDC.
В этом разделе рассказывается, как объединять элементы с помощью группирующей рамки.
Содержание |
[править] Группирующая рамка
Язык HTML предоставляет элемент fieldset, с помощью которого можно объединять элементы в группы. Обычно, вокруг группы рисуется рамка, отражающая связь между элементами. Примером может служить группа из нескольких флажков. В языке XUL для тех же целей предлагается использовать элемент groupbox.
Как видно из названия, groupbox — ни что иное как разновидность бокса. Это значит, что элементы внутри него будут выравниваться по правилам боксов. Есть два различия между группирующей рамкой и обычными боксами:
- По умолчанию вокруг нее рисуется рамка со скошенными углами. Это поведение всегда можно изменить используя CSS.
- Группирующая рамка может содержать заголовок, который располагается над верхней границей рамки.
Так как группирующие рамки являются видом боксов, для них можно использовать атрибуты присущие обычным боксам, например orient и flex. Вы можете помещать внутрь группирующей рамки любые элементы, хотя обычно они должны быть чем-то связаны.
Поместить метку на верх группирующей рамки можно с помощью элемента caption. Этот элемент во многом похож на legend из HTML. Достаточно поместить один элемент caption в качестве первого дочернего элемента.
Ниже приведен простой пример группирующей рамки:
[править] Пример: Простая группирующая рамка
<groupbox> <caption label="Answer"/> <description value="Banana"/> <description value="Tangerine"/> <description value="Phone Booth"/> <description value="Kiwi"/> </groupbox>
В результате будут выведены четыре обведенные рамкой строки с меткой Answer. Обратите внимание, что по умолчанию группирующая рамка выстраивает элементы вертикально, это нужно для того, чтобы получился столбец из текстовых элементов.
Вы так же можете добавлять в элемент caption вложенные элементы, чтобы сделать его более разнообразным. Например, панель выбора шрифта в Мозиле использует в качестве заголовка выпадающее меню. Любые другие элементы так же могут быть включены в заголовок, скорее всего вам пригодятся флажки и выпадающие списки.
[править] Группирующая рамка с флажком в заголовке
<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, будут вести себя так же, как и внутри обычных боксов.
Любые радиокнопки, содержащиеся в элементе группы, будут объединены друг с другом, даже если они находятся внутри еще каких-либо элементов. Это полезно при добавлении разных элементов, придающих группе кнопок дополнительную структуру. Этот прием отражен в следующем примере:
<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, чтобы появилась рамка, и можно было добавить заголовок.
Далее, используя только что полученные знания, мы добавим еще немного элементов в наш пример поискового диалога.