Добавляем...


DHTML и позиционирование регионов
Многие считают главным недостатком DHTML слишком большое расхождение объектных моделей — как следствие, реализация любой нетривиальной задачи в области Web-разработок требует особого внимания в отношении учета проблем работы сценариев в разных браузерах. Даже когда интерфейсы, посредством которых реализуется поддержка DHTML, оказываются совместимыми, браузеры могут интерпретировать стандарты по-разному, так что придется тщательно проверять сценарии чтобы гарантировать, что их поведение будет таким, как требуется, во всех браузерах используемых вашими пользователями. В этом разделе мы предлагаем небольшой обзор проблем использования сценариев в разных браузерах при создании про эффектов DHTML с позиционированием областей, когда требуется обеспечить работу сценария в браузерах как поддерживающих, так и не поддерживающих стандарты. Надеемся, что неудобство использования всяческих ухищрений и множество "подводных камней" окажутся для читателей стимулами к применению DHTML, ориентированного на стандарты, обсуждение которого предполагается в следующем разделе.

Обзор средств позиционирования CSS

С учетом того, как важно позиционирование для DHTML, мы представляем зддесь краткий обзор соответствующих возможностей CSS. Позиционирование CSS в целом контролируется комбинацией свойств position, top, bottom, right и left. В таблице представлены описания этих и некоторых других свойств, имеющие отношение к рассматриваемой задаче.

Таблица. Свойства объекта style, имеющие отношение к позиционированию
Свойство CSS Описание
position Определяет тип позиционирования для данного элемента: static (используется по умолчанию) absolute, relative, fixed или inherit. Чаще всего используется значение absolute, позволяющее установить точную позицию элемента независимо от остального потока данных документа
top Определяет позицию объекта по отношению к верхней границе объемлющего региона.Для большинства объектов этой границей будет верхняя граница области содержимого окна браузера
left Определяет позицию объекта по отношению к левой границе объемлющего региона, чаще всего это левая граница окна браузера
height Определяет высоту элемента. Для позиционируемых элементов часто указывается в пикселях (рх), однако возможны и другие единицы измерения, например проценты (%)
width Определяет ширину элемента. Для позиционируемых элементов часто указывается в пикселях (рх)
clip Прямоугольник отсечения типа clip: rect (top right bottom left) можно использовать для определения подмножества содержимого, которое будет показано в позиционируемом регионе, определенном прямоугольником с левым верхним углом в точке (left, top) и нижним правым углом в точке (right, bottom). Пиксельные значения этого прямоугольника указываются относительно региона отсечения, а не всего экрана
visibility Устанавливает видимость элемента. Возможными значениями являются hidden (скрытый), visible (видимый) и inherit (наследуемый)
z-index Определяет порядок в стеке объектов. Регионы с более высокими значениями z-index размещаются в стеке выше регионов с более низкими значениями. В отсутствие z-index порядок в стеке определяется порядком появления соответствующих определений, тогда на вершине стека оказывается последний из определенных объектов


Есть три основных типа позиционирования. Элемент с типом позиционирования static (статическое) размещается там, где он должен размещаться при нормальной визуализации документа (такое позиционирование называют также потоковым). Элемент с типом позиционирования relative (относительное) размещается со смещением, заданным с помощью top, bottom, left и/или right, относительно того размещения, которое соответствует нормальной визуализации документа. Таким образом, документ сначала размещается нормально, а затем элементы с относительным позиционированием смещаются в соответствии с указанными для них значениями. Заключительным типом позиционирования является absolute (абсолютное), означающее, что элемент не размещается как нормальная часть документа, а позиция элемента определяется смещением относительно родительского (объемлющего) элемента.
Элементы с абсолютным типом позиционирования, не содержащиеся в рамках других элементов (кроме <body>), легко перемещать по странице динамически с помощью JavaScript, поскольку их объемлющим элементом является весь документ. В этом случае координаты, назначаемые свойствам позиционирования, характеризуют позицию на странице. Можно скрыть позиционируемый регион с помощью установки свойства visibility, изменить размер, установив значения height и width и даже изменить содержимое, используя свойство innerHTML или методы DOM. Однако, хотя это и кажется простым, есть очень много различных способов позиционирования объектов, доступных с помощью JavaScript в браузерах.

Позиционируемые регионы Netscape 4: объект Layer

В Netscape 4 поддержка CSS1 далека от совершенства. Но в указанном браузере поддерживается дескриптор <lауеr>, который обеспечивает эквивалентные средства позиционирования регионов в таблицах стилей. Например,

<layer name="test" pagex="100" pagey="100" width="100" height="50" bgcolor="#ffff99">
Это слой!
</layer>

определяет тот же регион, что и

<div id="test" style="position: absolute; top: 10Орх; left: lOOpx; width: lOOpx; height: 50px; background-color: #ffff99;">
Это слой!
<div>

С учетом предыдущего обсуждения можно догадаться, что для правильную работу сценария в разных браузерах придется включить в документ и <div>, и <lауеr>. К счастью, непосредственно перед выпуском в Netscape 4 была добавлена поддержка позиционируемых дескрипторов <div>. Но следует отметить, что эта поддерка на самом деле реализована путем представления регионов <div> объектами Layer. Чтобы получить доступ к позиционируемому объекту <div> в Netscape 4, необхомо использовать коллекцию layers [ ]. Так, для получения доступа к региону, определенному фрагментом кода

<div id="regionl" style="position: absolute; top: lOOpx; left: lOOpx; width: lOOpx; height: lOOpx; background-color: #ffff99;">
Я позиционирован!
<div>

следует использовать document.layers['regionl']. Однако, получив доступ к региону, мы, к сожалению, не получаем возможности изменить значение свойства style региона. Но в Netscape 4 все же можно менять такие важные значения, как posit size и visibility. Например, чтобы изменить видимость региона (visibility), следует использовать document.layers['regionl'].visibility, установив данному свойству значение hide или show. Различные модифицируемые параметры региона непосредственно отображаются в свойства объекта Layer. Наиболее часто используемые свойства указанного объекта представлены в таблице.

Таблица. Наиболее полезные свойства объекта Layer
Свойство Описание
background Адрес URL фонового изображения для слоя
bgColor Цвет фона слоя
clip Ссылка на объект области отсечения для слоя. Этот объект имеет свойства top, right, bottom и left, которые соответствуют прямоугольнику отсечения CSS, а также свойства wi и height, которые могут использоваться аналогично свойствам width и height CSS
document Ссылка на объект Document текущего слоя
left Значение координаты х для позиции слоя
name Имя слоя
pageX Значение координаты х слоя относительно страницы
pageY Значение координаты у слоя относительно страницы
scr Адрес URL для ссылок на содержимое слоя, когда этот адрес неуказан непосредственно в рамках <layer>
top Значение координаты у для позиции слоя
visibility Ссылка на текущее состояние характеристики видимости слоя. Значения show и hide для <layer> эквивалентны значениям visible и hidden для CSS. Более поздние версии Netscape 4 проецируют оба значения, так что можно использовать любое из них
window Ссылка на объект Window, содержащий слой
x Значение координаты х для слоя
y Значение координаты у для слоя
zIndex Хранит информацию о позиции слоя в стеке

Конечно, <layer> является исключительно фирменным (частным), а не стандартным дескриптором, который не поддерживается вне Netscape 4. На самом деле в версия 6.х (и более поздних версиях) Netscape вообще отказалась от поддержки этого дескриптора. В следующих разделах мы увидим, как реализуется доступ к позиционируемым регионам в Internet Explorer и браузерах, обеспечивающих поддержку DOM

Позиционируемые регионы Internet Explorer 4+

Internet Explorer обеспечивает доступ к любому объекту и на странице через коллекцию all[ ]. Так, чтобы получить доступ к региону, определенному с помощью

<div id="regionl" style="position: absolute; top: lOOpx; left: lOOpx; width: lOOpx; height: lOOpx; background-color: #ffff99;">
Я позиционирован!
</div>

в Internet Explorer 4 + следует использовать document.all['regionl'], или document.all.regionl, или просто regionl. Получив доступ к нужному объекту, можно изменить его представление, используя объект Style. Например, чтобы установить цвет фона на оранжевый, аналогично установке свойства background-color CSS, можно использовать document.all['regionl'].style.backgroundColor = 'orange' или просто regionl.style.backgroundColor='orange'. Чтобы установить видимость региона, следует использовать regionl.style.visibility и установить для указанного свойства значение visible или hidden.
Отображение свойств стиля в свойства JavaScript обсуждалось в главе 10, но мы хотели бы напомнить еще раз, что в общем случае в IE и браузерах, совместимых с DOM, если рассматривается включающее дефис свойство CSS, то первая буква следующего за дефисом слова переводится в верхний регистр — например, свойство text-indent CSS превращается в textlndent JavaScript. В следующем разделе вы увидите небольшие вариации указанной выше схемы, поскольку стандарт DOM поддерживает другой синтаксис доступа к позиционируемым регионам. К счастью, со времени появления Internet Explorer 5, появилась реальная возможность использования любого из возможных вариантов синтаксиса.

Позиционируемые регионы DOM

Доступ к позиционируемым регионам в браузерах, поддерживающих DOM, почти так же прост, как и в Internet Explorer, где с дескрипторами <div> исполь коллекция all[ ]. Основным вариантом является использование метода document.getElementById(). Например, если регион определяется с помощью <div> и называется "regionl", то для доступа к нему следует использовать document.getElementById('regionl'). Затем можно установить значение видимости и другие связанные со стилями свойства, используя для этого объект Style точно так же, как и Internet Explorer. Так, чтобы изменить параметр видимости и скрыть объект, испольется document.getElementById('regionl').style.visibility='hidden'. Здесь, возникает вопрос: как установить свойства стиля, связанные с позиционированием слоя чтобы соответствующий программный код работал во всех браузерах? В следующем разделе предлагается одно из возможных решений.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика