Admin: 1 версия импортирована

2023-02-27T18:39:16Z

1 версия импортирована

← Предыдущая версия	Версия от 21:39, 27 февраля 2023
(нет различий)

lor>Cetjs2: Cetjs2 переименовал страницу XUL Графические Элементы в XUL/Графические элементы без оставления перенаправления

2018-02-27T19:33:47Z

Cetjs2 переименовал страницу XUL Графические Элементы в XUL/Графические элементы без оставления перенаправления

Новая страница

==description==

Самый простой элемент XUL - текстовый блок. Текст может задаваться в атрибуте ''value'' или быть внутри открывающего/зкрывающего элементов:

<pre>
<nowiki>
<description value="some text1" />
<description>some text2</description>
</nowiki>
</pre>

==label==

Текстовое поле, но более сложное, чем ''description''. Если пользователь кликает по элементу ''label'', то движок передаёт фокус элементу, чей id указан в атрибуте ''control''. Атрибут ''accesskey'' может содержать одну из букв текста, указанного в атрибуте ''value'', и служит горячей клавишей для активации данного элемента (как будто пользователь кликнул по элементу, нажимаем ALT+d):

<pre>
<nowiki>
<label accesskey="d" value="Email address" control="email"/>
<textbox id="email"/>
</nowiki>
</pre>

== hbox ==

Менеджер компоновки по горизонтали. Все дети компонуются по горизонтали в ряд, размер каждого ребёнка зависит от его параметра ''flex'':

<pre>
<nowiki>
<hbox>
<label value="1" />
<label value="2" />
<label value="3" />
<label value="stretchable label" flex="1"/>
</hbox>
</nowiki>
</pre>

Здесь четвёртый элемент будет изменять свой размер, при изменении размера окна, а первые три элементы оставаться фиксированными.

== vbox ==

Менеджер компоновки по вертикали. Все дети компонуются по вертикали в колонку, размер каждого ребёнка зависит от его параметра ''flex'':

<pre>
<nowiki>
<vbox flex="1">
<label value="1" />
<label value="2" />
<label value="3" />
<label value="stretchable label" flex="1" style="background-color: red;" />
</vbox>
</nowiki>
</pre>

У окна компоновка по умолчанию - vbox. Поэтому в данном примере корневой элемент vbox имеент атрибут ''flex'' равным 1 - чтобы он растягивался вместе с окном, и соответственно, чтобы четвёртый элемент ''label'' также растягивался.

== button ==

Обычная кнопка. Атрибут ''label'' задаёт текст для кнопки, ''image'' - URL изображения для кнопки. Атрибут ''type'' управляет поведением кнопки. Он может быть

* ''checkbox'' - кнопка ведёт себя как элемент ''checkbox'', она может быть в двух состояниях - нажата и отжата:

<pre>
<nowiki>
<button label="Press Me" type="checkbox" oncommand="alert('Clicked');"/>
</nowiki>
</pre>

* ''menu'' - кнопка с выпадающим меню, когда на неё кликают. Само меню задаётся как элемент ''menupopup'' внутри кнопки:

<pre>
<nowiki>
<button label="Press Me" type="menu">
<menupopup>
<menuitem label="1" value="first"/>
<menuitem label="2" value="second"/>
<menuitem label="3" value="third"/>
</menupopup>
</button>
</nowiki>
</pre>

* ''menu-button'' - аналогично предыдущему, но меню выпадает, когда кликают на стрелку.
* ''radio'' - кнопка, аналогичная ''checkbox'', за исключением того, что только одна кнопка типа ''radio'' может быть нажата в группе.
* ''repeat'' - кнопка с автоповтором, пока мышь держится нажатой на ней.

[[Category:XUL]]

XUL/Графические элементы - История изменений

Admin: 1 версия импортирована

lor>Cetjs2: Cetjs2 переименовал страницу XUL Графические Элементы в XUL/Графические элементы без оставления перенаправления