Глава 4. "Простые" элементы ввода.

image - вставка изображения

Для того, чтобы вставить изображение существует простой тег <image>. Его формат:

<image src="Image.png" />

атрибут src - указывает на URL изображения. Кроме непосредственного задания через src, местоположение изображения можно задать через CSS, исползуя list-style-image.

<image id="mImage" />
...
#mImage  {
list-style-image: url("Image.png");
}

textbox - Ввод текста

Для ввода текста в XUL используют элемент textbox. Посмотреть пример

<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    title="Пример 4.1"
    id="ButtonWin"
    orient="horizontal" 
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<label value="Привет" control="HName" />
	<textbox id="HName"  />
	<button label="Поехали" flex="1" />
</window>

По умолчанию textbox состоит из одной строки, исправить, это можно установив атрибут multiline в true.

Атрибуты textbox (общие атрибуты в предыдущей главе):

cols, rows - определяет размер, колонки и столбцы.
maxlength - максимальное количество символов, которые можно ввести.
multiline - если true - поле ввода состоит больше чем из одной строки (по умолчанию три строки).
oninput - указывает на функцию, которая вызовётся в случае ввода текста. (нажатия клавиш, не приводящих к изменению, не вызывают обработчика);
readonly - только для чтения.
size - Видимых символов (работает как-то странно).
type - тип, возможны варианты :
- text
- password
- autocomplete
wrap - если true автоперенос на следующую строку.

listbox - выбор из списка

Для выбора элементов из списка служит комбинация тэгов <listitem > для элемента списка, вся группа обрамляется <listbox>. Посмотреть пример

<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    title="Пример 4.2"
    id="SamplWin"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<listbox width="100" height="100">
		<listitem id="a1" label="Ты"/>
		<listitem id="a2" selected="true" label="Я"/>
		<listitem id="a3" label="Он" />
		<listitem id="a4" label="Она" selected="true"/>
	</listbox>
</window>

Контролировать размер в строках можно при помощи атрибута rows. При помощи атрибута image можно задать картинку для пункта списка. selected указывает на выбранный пункт.

Ниспадающий список

Ниспадающие списки, подобные select в HTML, можно создать при помощи элемента menulist. Посмотреть пример

<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window title="Пример 4.4"  
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<menulist>
	  <menupopup>
	    <menuitem label="Ты" selected="true"/>
	    <menuitem label="Я"/>
	    <menuitem label="Он" />
	    <menuitem label="Она"/>
	  </menupopup>
	</menulist>
</window>

menupop описывает всплывающее меню. Пункты меню описывают menuitem. selected указывает на выбранный пункт. Для того, чтобы включить возможность редактирования поля ввода необходимо установить атрибут editable="true".

checkbox

checkbox - служит для установки флаговой кнопки (кнопки с указанием включения / выключения).

Пример:


<checkbox label="а ты проголосовал за президента?">

Атрибуты checkbox:

checked - помечена или нет.
label - надпись.

radio buttons

Для селективного выбора используются radio buttons. Каждый элемент отображается при помощи тэга <radio>, вся группа обрамляется <radiogroup>. Посмотреть пример

<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    title="Пример 4.3"
    id="SamplWin"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<radiogroup>
		<radio id="a1" selected="true" label="Ты"/>
		<radio id="a2" label="Я"/>
		<radio id="a3" label="Он"/>
		<radio id="a4" label="Она"/>
	</radiogroup>
</window>

Атрибуты radio:

selected - выбрана или нет.
label - надпись.

Продолжить, к Главе 5
Вернуться, к Главе 3

Хотите помочь? Вы нашли ошибку или хотите сделать комментарий - пишите. Я рад любой помощи.