Статьи Новости Контакты

24.10.2008
Петр Агофонов

Манипуляции с всплывающими окнами в overlib

описание работы с JavaScript-библиотекой overlib

Новомодные тенденции развития Сети диктуют популярным ресурсам соответствующий дресс-код, без соблюдения которого те рискуют быть просто проигнорированы пользователями. Веб-cайты вынуждены привлекать аудиторию уже не только за счет обилия полезной информации. Иначе говоря, просто контента становится явно недостаточно. Кроме интересного содержимого популярному проекту необходимо иметь в своем составе разнообразные мелкие детали, которые подчеркнули бы индивидуальность его характера. Можно сказать, что веб-сайт должен иметь свою изюминку. Сегодня речь пойдет о библиотеке JavaScript под наименованием overlib, которая предназначена для создания всплывающих окон и которая как раз подойдет для того, чтобы придать вашему веб-сайту некоторую индивидуальность за счет оформления всплывающими окнами.

Как часто вас спрашивали ваши заказчики, владеете ли вы искусством создания сайтов в стиле AJAX? Как правило, эта аббревиатура означает всего лишь интерактивность некоторых элементов сайта, которая достигается без их обязательной перезагрузки. Конечно, это также означает, что сама структура сайта должна быть сделана с применением достаточно специфического кодирования на JavaScript. А это уже проблема, поскольку разработка на этом языке достаточно проблематична и сложна в силу множества нестыковок методов и атрибутов объектных моделей в различных браузерах.

Обычно, если разработчик натыкается на сложную задачу, простейший способ ее решить — использовать готовую библиотеку. Также и в AJAX: многие элементы, которые позволяют сделать ваш ресурс более интерактивным, можно создать и с использованием библиотек сторонних разработчиков. Например, рассматриваемая сегодня overlib позволяет делать всплывающие окна. Причем для создания этих объектов может использоваться масса настроек. Все это может сделать ваш веб-проект совершенно уникальным. Конечно же, большим преимуществом использования такого метода является его всеядность по отношению к разнообразным браузерам. Также стоит отметить, что безусловной гарантией качества overlib является тот факт, что данная библиотека использовалась на сайтах NASA, Intel и HP.

Подключение
Вначале пару слов о подключении библиотеки. Как правило, достаточно просто разместить ее в корне вашего веб-сайта либо в одном из его подкаталогов и подключить все функции в заголовке страницы. Скачать сам инсталляционный архив с файлами библиотеки можно на ее официальной веб-странице в разделе Download. Следует отметить, что на момент публикации последней доступной версией overlib была 4.21. Однако также возможна загрузка (очевидно, для желающих изучить метаморфозы развития этого программного продукта) и более ранних релизов этого ПО.

Библиотеку лучше всего подключать с помощью следующей стандартной вставки непосредственно в заголовок (тег header) вашей страницы:   
<script  type="text/javascript"  src="overlib.js"></script>  

Кроме того, необходимо добавить еще один фрагмент html-кода сразу после тега <body>:   
<div  id="overDiv"  style="position:absolute;  visibility:hidden;  z-index:1000;"></div>  

Этот кусок необходим для обеспечения работоспособности самих всплывающих окон, которые будет создавать данная библиотека.

Как вы уже отметили, для обеспечения минимальной функциональности единственным копируемым файлом библиотеки может быть overlib.js.

Типы окон в overlib
Условно все окна, которые будет создавать overlib, можно разделить на два типа. Вы можете создать либо "исчезающие", либо "прикрепленные" окна.

Что это такое? Представьте, что вам необходимо разъяснить посетителям, что означает то или иное поле в форме регистрации вашего сайта. В этом случае необходимо окно первого типа, которое бы появлялось, скажем, при наведении мыши на знак вопроса, который находился бы рядом с нужным полем. После такого наведения было бы показано окно со справкой. Конечно, при перемещении курсора вдаль от локатора справки окно должно было бы исчезнуть.

Второй тип окон, который обрабатывает overlib, становится необходим в том случае, если необходимо выполнить какие-либо действия в самом всплывшем окне. Например, пользователь может таким образом выделить и скопировать в буфер кусок фрагмента нужного ему текста, который, собственно, и будет показан при наезде мышкой на ссылку.

"Исчезающие" окна-подсказки первого типа могут создаваться при помощи стандартных гиперссылок. Конечно, для того чтобы такое окно было показано при наезде мышкой и исчезло сразу же после того, как вы забрали указатель со ссылки, необходимо несколько видоизменить код тега <a  href=...>. Вот пример ссылки, при наведении курсора на которую будет показано "исчезающее" окно:   
<html>  
<script  type="text/javascript"  src="overlib.js"></script>  
<body>  
<div  id="overDiv"  style="position:absolute;  visibility:hidden;  z-index:1000;"></div>  
  
<a    
    href="javascript:void(0);"    
    onmouseover="return  overlib('Спасибо,  вам  показано<br>"исчезающее"  многострочное<br>окно  подсказки');"    
    onmouseout="return  nd();">Наведи  на  меня  мышь  
</a>  
  
</body>  
</html>

Обратите внимание на то, что двойная кавычка в вызове функции overlib(), которая в данном примере используется при обработке события onmouseover, принимает однострочные параметры, в которых двойные кавычки заменены на ", а одинарные экранируются: \'.

На следующем рисунке показано, как будет выглядеть всплывающее окно при наведении на него курсора мыши.

Исчезающая подсказка
«Исчезающая» подсказка

Если вам необходимо, чтобы окно подсказки исчезало не сразу, а, скажем, через полсекунды после того, как курсор мыши съехал со ссылки, укажите следующий код для обработки onmouseout — "return  nd(500);". Следует отметить, что в данном примере сама функция overlib() была вызвана всего с одним параметром — строкой. На самом деле она может принимать сразу несколько входных значений. Именно от них и будут полностью зависеть внешний вид и поведение всплывающих окон.

Собственно, второй тип всплывающих окон получается при указании следующей комбинации входных параметров:   
<a    
    href="javascript:void(0);"    
    onmouseover="return  overlib('Прилипшее  окно  с<br><textarea  cols=20  rows=10>кодом</textarea>',STICKY,  MOUSEOFF);"    
    onmouseout="return  nd(200);">Наведи  на  меня  мышь  
</a>

Как видите, данный тип окон полезен тем, что при наведении на "всплывшее" окно курсора мыши само окно остается на экране и в нем можно выполнять определенные действия. Например, в приведенном выше примере в окно можно ввести текст. Конечно, это занятие бессмысленное, до тех пор пока не сделан обработчик для запоминания введенных таким образом данных. Однако важна, скорее, сама иллюстрация такой возможности.

«Прилипающее» окно с полем ввода

Overlib на самом деле имеет несколько типов аргументов, которые тем или иным образом конфигурируют вид показываемых окон. Например, следующим образом вы можете вывести окно, которое будет иметь заголовок и закрываться при наведении на ссылку Close:   
<a  href="javascript:void(0);"  onclick="return  overlib('Это  прилипшее  окно  с  заголовком.  И  оно  отцентрировано!',    
STICKY,  CAPTION,  'Прилепленое  окно',  CENTER);"  onmouseout="nd();">Кликни  меня  <b>здесь</b>!</a>  

Как видите, overlib может принимать в качестве значения параметра команду. Причем для определенных типов этих команд сразу за указанием типа должен следовать аргумент, например название окна для указания вывести заголовок окна — CAPTION. Функция может принимать несколько команд. Само собой, необходимо следить за тем, чтобы их параметры передавались правильно и в нужном порядке.

Перечислим всего лишь несколько инструкций, которые могут передаваться в качестве команды в функцию overlib():

  • STICKY — уже знакомый аргумент, задающий "прилипание" окна, до тех пор пока оно не будет закрыто. По умолчанию считается, что этот режим отключен;
  • WIDTH пикселов — таким образом можно задать ширину окна. Например, overlib('Окно  шириной  300  точек',  WIDTH,  300);
  • HEIGHT пикселов — указываем высоту окна;
  • LEFT, RIGTH, CENTER — помещаем окно слева, справа или же в центре относительно позиции курсора мыши;
  • FGCOLOR цвет, таким образом можно задать фоновый цвет окон, отличный от фиолетового, который задан по умолчанию;
  • TEXTFONT шрифт — задаем тип шрифта для текста в окне. Конечно, этого же эффекта можно было бы добиться и с помощью применения стилей. Но данный метод несколько более универсален в применении;
  • CLOSETEXT текст — задается текст для ссылки, закрывающей окно. Полезно для локализации сайта.

Перечислено всего лишь несколько из десятков команд, которые воспринимает функция overlib. Полный их список с примерами включения в код доступен в разделе документации на этой странице.

Глобальное изменение атрибутов
В том случае, если необходимо на определенной странице сразу все всплывающие окна привести к какому-то определенному виду, можно использовать следующую конструкцию вставки кода библиотеки:

  
<html>  
<script  type="text/javascript"  src="overlib.js"></script>  
<script  type="text/javascript">  
ol_bgcolor  =  "red";  
ol_fgcolor  =  "yellow";  
ol_close      =  "Закрыть  [X]";  
ol_closeclick  =  1;  
ol_closecolor  =  "white";  
</script>  
  
<body>  
<div  id="overDiv"  style="position:absolute;  visibility:hidden;  z-index:1000;"></div>  
  
<a  href="javascript:void(0);"  onmouseover="return  overlib('Это  прилипшее  окно  с  заголовком.  И  оно  отцентрировано!',    
STICKY,  CAPTION,  'Прилепленное  окно',  CENTER);"  onmouseout="nd();">Наведи  на  меня  курсор!!!</a>  
  
</body>  
</html>  

Окно с глобально заданными атрибутами

Переменные типа ol_xxx, которые также описаны на странице документации по командам библиотеки, позволяют задать глобальные параметры для всплывающих окон. Например, ol_closeclick=1 указывает на то, что все всплывающие окна могут быть закрыты только кликом на ссылке, ol_closecolor указывает цвет самой ссылки закрытия окна и т. п. Само собой, эти атрибуты могут быть перекрыты при вызове функции overlib с другими аргументами.

В заключение
Внедрение такой библиотеки, как overlib, не может в одночасье преобразить внешний вид сайта. Однако сделать некоторые нюансы работы более удобными ей вполне по силам. Таким образом, можно сэкономить место на формах ввода, спрятав подробные подсказки для начинающих. Можно более эффективно размещать ремарки и подсказки. Можно делать предпросмотр изображений. Одним словом, overlib может сделать ваш сайт более удобным. Причем на само подключение будет потрачено всего несколько минут вашего времени.





Скоро на сайте

  • Wordpress

    Серия статей о плагинах к движку WordPrress
  • AJAX

    Проекты и продукты, ориентированные на AJAX
  • Новые сервисы Google

    Обзор новых сервисов Google
 

Copyright © 2003—2018 Все права защищены

При использовании материалов сайта ссылка на hostinfo.ru обязательна

  • хостинг от .masterhost
  • Rambler's Top100