Глава 7. Поиграем в карты?

Язык XUL не поддерживает в обычных "контейнерах" абсолютного позиционирования предусмотренного CSS2. Для позиционирования элементов используются специальные конструкции stack и deck. Эти конструкции представляют собой некие колоды карт. Рассмотрим каждый из них подробнее.

stack

stack - представляет собой колоду карт, где каждый элемент внутри него - новая карта поверх предыдущей. Особенностью stack является то, что рубашки у этих карт прозрачные. Все карты расположены точно одна поверх другой. И самое главное: у дочерних элементов внутри начинают работать стили позиционирования CSS, такие как left, top.
Рассмотрим пример (напоминаю - использовать встроенные стили является дурным тоном, для дальнейшего удобства в реальных проектах всегда стоит выносить их в отдельный css файл. Здесь это делается только для удобства примера):
Посмотреть пример

<?xml version="1.0" encoding="windows-1251"?>
<window title="Карточные игры"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<stack style="width:200px;">
		<description style="color:green; top:5px; left:5px;" value="Привет ! :)"/>
		<description style="color:red; top:15px; left:15px;" value="черви"/>
		<description style="top:20px; left:20px;" value="пики"/>
		<description style="color:blue; top:25px; left:30px;" value="я люблю XUL"/>
		<image src="/Image/ico-xul.gif" style="top:5px; left:50px;"/>
	</stack>
</window>

Каждый элемент располагается поверх предыдущего. Самым верхним элементом оказывается самый последний. Размеры "карточной колоды" зависят от размера самой большой карты, но вы можете при помощи CSS назначить такие параметры как width, height, min-width, max-height и так далее.

stack - наиболее важный элемент XUL для создания видеоэффектов, таких как игры. Так как абсолютное позиционирование не поддерживается в других элементах, то обычно используют именно его.

Часто stack используют для создания "объемных" букв с тенью и других текстовых эффектов.
Посмотреть пример

<?xml version="1.0"?>
<window title="Firefox" 
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<stack style="width:200px;">
		<description style="top:5px; left:5px;" value="Firefox"/>
		<description style="color:grey; font-size:20px; top:27px; left:7px;"
			value="Take Back the Web"/>
		<description style="color:blue; font-size:20px; top:25px; left:5px;" 
			value="Take Back the Web"/>
	</stack>
</window>

deck

deck - очень похож на stack за одним исключением: рубашки у карт не прозрачны, поэтому в один момент вы можете увидеть только одну "карту". Нумерация, в отличие от stack начинается с первого элемента. Первый элемент имеет индекс "0". По умолчанию, показывается элемент с индексом 0. Изменить этот порядок вы можете с помощью атрибута selectedIndex. Возьмем первый пример и поменяем stack на deck, добавив selectedIndex:
Посмотреть пример

<?xml version="1.0" encoding="windows-1251"?>
<window title="Карточные игры - 2"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<deck selectedIndex="3" style="width:200px;">
		<description style="color:green; top:5px; left:5px;" value="Привет ! :)"/>
		<description style="color:red; top:15px; left:15px;" value="черви"/>
		<description style="top:20px; left:20px;" value="пики"/>
		<description style="color:blue; top:25px; left:30px;" value="я люблю XUL"/>
		<image src="/Image/ico-xul.gif" style="top:5px; left:50px;"/>
	</deck>
</window>

В результате мы видим, что отображается только четвёртая по счёту "карта" с индексом "3", остальные остаются невидимыми. Имея дело с deck мы не можем "перевернуть карту" простым нажатием клавиши или мыши, это возможно только изменением selectedIndex при помощи JavaScript. Существует некий элемент, в котором это возможно без программирования, о нём мы расскажем в следующей главе.

• Назад, играть в "крестики-нолики" в Главе 6.
• Вперёд, к главе 8, Подробнее об окнах.

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