Документы



Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) icon

Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)

НазваниеВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
Дата28.06.2013
Размер72.48 Kb.
ТипДокументы
скачать

Введение в JavaScript для Мага

© 1996, 1997 Стефан Кох (Stefan Koch)


Часть 9: Слои I


Что такое слои?


Слои - это одна из замечательных новых возможностей браузера Netscape Navigator 4.0. Она позволяет выполнять точное позиционирование таких объектов web-страницы, как изображения. Кроме того, теперь Вы можете перемещать объекты по вашей HTML-странице. Вы можете также делать объекты невидимыми.

Управлять слоями можно легко с помощью языка JavaScript. Я надеюсь, что Вы, как и я, проникнитесть энтузиазмом в отношении возможностей этих слоев.


В данный момент пользоваться слоями Вы можете только в Netscape Navigator 4.0!


И, как обычно, я не буду детально описывать различные тэги. Хороший документ, описывающий все свойства такого объекта Netscape Navigator 4.0, как слои, находится по адресу http://home.netscape.com/comprod/products/communicator/index.html - и потому у меня нет нужды его пересказывать.


Что такое в действительности слои? Объяснять это очень легко на простом примере: берете несколько листов бумаги. На одном листе пишете текст. На другом - рисуете картинку. На третьем листе берете картинку и вписываете вокруг нее некий текст. И так далее. Теперь кладете эти листы на стол. Допустим, каждый лист - это некий слой. В этом смысле слой представляет собой в некотором роде контейнер. То есть он может включать в себя (содержать) некие объекты - в данном случае это будет текст и изображения.


Теперь берем бумагу с изображением и двигаем его по столу. Внимательно следите за тем, как это изображение движется вслед за бумагой. Если Вы сместим лист бумаги вправо, то и изображение тоже сдвинется! И что же собственно мы должны извлечь из этого увлекательного опыта? Слои, способные содержать различные объекты, например изображения, формы, текст, могут быть наложены на Вашу HTML-страницу и даже перемещаться по ней. Если Вы сдвигаете какой-либо слой, то и все содержащиеся в этом слое объекты тоже будут повторять это движение. Слои могут накладываться друг на друга подобно простым листам бумаги на столе. В каждом слое могут присутствовать прозрачные области. Сделайте в листе бумаги дырку. Теперь положите этот лист на другой. Такое отверстие - это 'прозрачная область' на первом листе - и через нее как раз видны нижележащие листы.


Создание слоев


Чтобы создать слой, мы должны использовать либо тэг либо . Вы можете воспользоваться следующими параметрами:


Параметр

Описание

name="layerName"

Название слоя

left=xPosition

Абсцисса левого верхнего угла

top=yPosition

Ордината левого верхнего угла

z-index=layerIndex

Номер индекса для слоя

width=layerWidth

Ширина слоя в пикселах

clip="x1_offset,y1_offset,x2_offset,y2_offset"

Задает видимую область слоя

above="layerName"

Определяет, какой слой окажется под нашим

below="layerName"

Определяется, какой слой окажется над нашим

Visibility=show|hide|inherit

Видимость этого слоя

bgcolor="rgbColor"

Цвет фона - либо название стандартного цвета, либо rgb-запись

background="imageURL"

Фоновая картинка



Тэг используется для тех слоев, которые Вы можете точно позиционировать. Если же Вы не указываете положение слоя (с помощью параметров left и top), то по умолчанию он помещается в верхний левый угол окна.

Тэг создает слой, положение которого определяется при формировании документа.


Давайте теперь начнем с простого примера. Мы хотим создать два слоя. В первом из них мы помещаем изображение, а во втором - текст. Все, что мы хотим сделать - показать этот текст поверх данного изображения.



^ Текст поверх изображения


Исходный код:














Layers-Demo







Как видим, с помощью тэга мы формируем два слоя. Оба слоя позиционируются как 200/100 (через параметры left и top). Все, что находится между тэгами и (или тэгами и ) принадлежит описываемому слою.

Кроме того, мы используем параметр z-index, определяя тем самым порядок появления указанных слоев - то есть, в нашем случае, Вы тем самым сообщаете браузеру, что текст будет написан поверх изображения. В общем случае, именно слой с самым высоким номером z-index будет показан поверх всех остальных. Вы не ограничены в выборе z-index лишь значениями 0 и 1 - можно выбирать вообще любое положительное число.

Так, если в первом тэге Вы напишете z-index=100, то текст окажется под изображением - его слой номер Z-индекса (z-index=1). Вы сможете увидеть текст сквозь изображение, поскольку я использовал в нем прозрачный фон (формат gif89a).




^ Тект под изображением


Слои и JavaScript


Рассмотрим теперь, как можно получить доступ к слоям через JavaScript. Начнем же мы с примера, где пользователь получает возможность, нажимая кнопку, прятать или показать некий слой.

Для начала мы должны знать, каким образом слои представлены в JavaScript. Как обычно, для этого имеются несколько способов. Самое лучшее - дать каждому слою свое имя. Так, если мы задаем слой




...




то в дальнейшем можем получить доступ к нему с помощью конструкции document.layers["myLayer"]. Согласно документации, предоставляемой фирмой Netscape, мы можем также использовать запись document.myLayer - однако в моем браузере это приводит к сбою. Конечно, это всего лишь проблема предварительной версии и в заключительном варианте будет успешно решена (сейчас я пользуюсь Netscape Navigator 4.0 PR3 на WinNT). Однако, по-видимому, нет никаких проблем с конструкцией document.layers["myLayer"] - поэтому мы и будем пользоваться именно такой альтернативой из всех возможных.


Доступ к этим слоям можно также получить через целочисленный индекс. Так, чтобы получить доступ к самому нижнему слою, Вы можете написать document.layers[0]. Обратите внимание, что индекс - это не то же самое, что параметр z-index. Если, например, Вы имеете два слоя, называемые layer1 и layer2 с номерами z-index 17 и 100, то Вы можете получить доступ к этим слоям через document.layers[0] и document.layers[1], а не через document.layers[17] и document.layers[100].


Слои имеют несколько свойств, которые можно изменять с помощью скрипта на JavaScript. В следующем примере представлена кнопка, которая позволяет Вам скрывать или, наоборот, предоставлять один слой (требуется Netscape Navigator версии 4.0 или выше).


(online-версия руководства позволит Вам проверить этот скрипт немедленно)


Исходный код скрипта выглядит следующим образом:















This text is inside a layer
















Данная кнопка вызывает функцию showHide(). Можно видеть, что в этих функциях реализуется доступ к такому свойству объекта layer (myLayer), как видимость. Присвоивая параметру document.layers["myLayer"].visibility значения "show" или "hide", Вы можете показать или скрыть наш слой. Заметим, что "show" и "hide" - это строки, а не зарезервированные ключевые слова, то есть Вы не можете написать document.layers["myLayer"].visibility= show. Вместо тэга я также пользовался тэгом , поскольку хотел поместить этот слой в "информационный поток" документа.


Перемещение слоев


Свойства left и top определяют задают положение данного слоя. Вы можете менять его, записывая в эти атрибуты новые значения. Например, в следующей строке задается горизонтальное положение слоя в 200 пикселов:


document.layers["myLayer2"].left= 200;


Перейдем теперь к программе перемещения слоев - она создает нечто вроде линейки прокрутки внутри окна браузера.


(online-версия руководства позволит Вам проверить этот скрипт немедленно)


Сам скрипт выглядит следующим образом:















This text is inside a layer









Мы создаем слой с именем myLayer2. Можно видеть, что в тэге мы пользуемся процедурой onLoad. Нам необходимо начать прокручивание слоя, как только страница будет загружена. В процедуре обработки события onLoad мы пользуемся функцией setInterval(). Это один из новых методов версии 1.2 языка JavaScript (то есть версии JavaScript, реализованной в Netscape Navigator 4.0). Им можно пользоваться, чтобы вызывать некую функцию мвновь и вновь через определенные интервалы времени. В прошлом для этого мы пользовались функцией setTimeout(). Функция setInterval() работает почти так же, однако Вам нужно вызвать ее всего лишь один раз.


С помощью setInterval() мы вызываем функцию move() каждые 20 миллисекунд. А функция move(), в свою очередь, всякий раз смещает слой на новую позицию. И поскольку мы вызываем эту функцию вновь и вновь, то мы получаем быстрый скроллинг нашего текста. Все, что мы нужно сделать в функции move() - это вычислить новую координату для слоя и записать ее: document.layers["myLayer2"].left= pos.


Если Вы посмотрите исходный код этой части в онлайновом описании, то увидите, что в действительности мой код выглядит несколько иначе - я добавил некий фрагмент кода с тем, чтобы люди, работающие со старыми версиями JavaScript-браузеров, не получали из-за этого никаких сообщений об ошибках. Как этого можно достичь? Следующий фрагмент кода будет выполняться только на тех браузерах, которые воспонимают язык JavaScript 1.2:





Та же самая проблема возникает, когда мы работаем с объектом Image. Мы можем аналогичным способом переписать кодекс. Установка переменной browserOK решает эту проблему.


(online-версия руководства позволит Вам проверить этот скрипт немедленно)


©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

http://rummelplatz.uni-mannheim.de/~skoch/

Моя книга по JavaScript: http://www.dpunkt.de/javascript



Похожие:

Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
Мы уже обсудили основные понятия новой технологии слоев. В этой же части будут рассмотрены следующие темы
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
С помощью новой модели событий в языке JavaScript, 2 и механизма слоев мы можем реализовать на нашей web-странице схему drag & drop...
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
Легко проверить ее перед пересылкой в Интернет можно с помощью языка JavaScript. Сначала я бы хотел продемонстрировать, как можно...
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
Наступило время, рассмотреть одну из новых особенностей Netscape Navigator x модель событий JavaScript Приведенные здесь примеры...
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
В javaScript Вам разрешено пользоваться некоторыми заранее заданными объектами. Примерами таких объектов могут служить Date, Array...
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
Рассмотрим теперь объект Image, который стал доступен, начиная с версии с 1 языка JavaScript (то есть с Netscape Navigator 0). С...
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
В свою очередь, язык JavaScript позволит Вам легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию...
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
Вашего браузера. Все, что Вам необходимо для этого сделать всего лишь записать нужную строку в window status. В следующем примере...
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
Хотя создание фреймов является задачей языка html, я бы хотел все же описать здесь основные моменты этого процесса. Для создания...
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) iconВведение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch)
Посмотрим сначала, как можно открыть новое окно, потом как загрузить в это окно html-страницу и, наконец, как его закрыть. Приводимый...
Загрузка...
Разместите кнопку на своём сайте:
Документы


База данных защищена авторским правом ©uz.denemetr.com 2000-2015
При копировании материала укажите ссылку.
обратиться к администрации