Язык XUL не поддерживает в обычных "контейнерах" абсолютного позиционирования предусмотренного CSS2.
Для позиционирования элементов используются специальные конструкции stack
и deck
. Эти конструкции представляют собой некие колоды карт. Рассмотрим
каждый из них подробнее.
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>
-moz-opacity
. Значение этого стиля меняется от 0 до 1.<bulletinboard>
. От полностью аналогичен
stack
. Его не описывают в большинстве документаций,
но для совместимости Mozilla поддерживает его.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. Существует некий элемент,
в котором это возможно без программирования, о нём мы расскажем в следующей главе.
Хотите помочь? Вы нашли ошибку или хотите сделать комментарий - пишите. Я рад любой помощи.
©Yegor Turin (electroCat.ru) 2004 year. All Rights Reserved.