 |
Статьи | Новости | Контакты | |||||||
|
|
||||||||||
|
||||||||||
24.10.2008 |
||||||||||
 |
Новомодные тенденции развития Сети диктуют популярным ресурсам соответствующий дресс-код, без соблюдения которого те рискуют быть просто проигнорированы пользователями. Веб-cайты вынуждены привлекать аудиторию уже не только за счет обилия полезной информации. Иначе говоря, просто контента становится явно недостаточно. Кроме интересного содержимого популярному проекту необходимо иметь в своем составе разнообразные мелкие детали, которые подчеркнули бы индивидуальность его характера. Можно сказать, что веб-сайт должен иметь свою изюминку. Сегодня речь пойдет о библиотеке JavaScript под наименованием overlib, которая предназначена для создания всплывающих окон и которая как раз подойдет для того, чтобы придать вашему веб-сайту некоторую индивидуальность за счет оформления всплывающими окнами.
Как часто вас спрашивали ваши заказчики, владеете ли вы искусством создания сайтов в стиле AJAX? Как правило, эта аббревиатура означает всего лишь интерактивность некоторых элементов сайта, которая достигается без их обязательной перезагрузки. Конечно, это также означает, что сама структура сайта должна быть сделана с применением достаточно специфического кодирования на JavaScript. А это уже проблема, поскольку разработка на этом языке достаточно проблематична и сложна в силу множества нестыковок методов и атрибутов объектных моделей в различных браузерах.
Обычно, если разработчик натыкается на сложную задачу, простейший способ ее решить — использовать готовую библиотеку. Также и в AJAX: многие элементы, которые позволяют сделать ваш ресурс более интерактивным, можно создать и с использованием библиотек сторонних разработчиков. Например, рассматриваемая сегодня overlib позволяет делать всплывающие окна. Причем для создания этих объектов может использоваться масса настроек. Все это может сделать ваш веб-проект совершенно уникальным. Конечно же, большим преимуществом использования такого метода является его всеядность по отношению к разнообразным браузерам. Также стоит отметить, что безусловной гарантией качества overlib является тот факт, что данная библиотека использовалась на сайтах NASA, Intel и HP.
Библиотеку лучше всего подключать с помощью следующей стандартной вставки непосредственно в заголовок (тег 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, становится необходим в том случае, если необходимо выполнить какие-либо действия в самом всплывшем окне. Например, пользователь может таким образом выделить и скопировать в буфер кусок фрагмента нужного ему текста, который, собственно, и будет показан при наезде мышкой на ссылку.
"Исчезающие" окна-подсказки первого типа могут создаваться при помощи стандартных гиперссылок. Конечно, для того чтобы такое окно было показано при наезде мышкой и исчезло сразу же после того, как вы забрали указатель со ссылки, необходимо несколько видоизменить код тега <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 с другими аргументами.
Ссылки по теме
Скоро на сайте
-
Wordpress
Серия статей о плагинах к движку WordPrress -
AJAX
Проекты и продукты, ориентированные на AJAX -
Новые сервисы Google
Обзор новых сервисов Google
Copyright © 2003—2018 Все права защищены
При использовании материалов сайта ссылка на hostinfo.ru обязательна
