Подсказки

Использовать строку состояния в браузере довольно просто, создать же что-то более эффективное — например, всплывающую подсказку —несколько сложнее. Чтобы упростить себе жизнь, можно использовать специальную библиотеку для создания подсказок (tooltip.js), бесплатно доступную в сети и работающую на базе замечательной JavaScript-библиотеки Prototype.js.

Пример кода:

Сначала страница, используя метод Ajax.Updater библиотеки Prototype.js, выполняет Ajax-вызов для обновления содержимого подсказки, а затем с помощью класса Tooltip одноимённой библиотеки эта подсказка привязывается к тегу <div>, с id="book1".

Если теперь открыть страницу в браузере, то мы увидим что-то вроде

И если навести мышку на этот текст, появится небольшое всплывающее окошко:

Всплывающие подсказки - это простой способ «разгрузить» страницу и в тоже время сохранить возможность доступа к контенту, если он вдруг понадобится посетителям страницы. Если пользователь хочет получить дополнительные сведения о каком-то элементе сайта, он может просто навести на него указатель мыши, и появится подсказка с более детальной информацией. Причём эта информация может иметь произвольно сложную структуру, содержать картинки, таблицы и форматирование.

Лайтбоксы

Лайтбоксы – это новый и наиболее оригинальный способ обратить внимание пользователя на какой-то конкретный элемент. Так, в нижеприведённом примере, страница содержит уменьшенную картинку (thumbnail), при щелчке на которую появляется "лайтбокс" с полноразмерным изображением.

Для создания этого эффекта используется замечательная библиотека Lightbox JS 2.0, которая также работает на Prototype.js.

Пример кода:

Если открыть эту страницу в браузере, можно увидеть уменьшенную картинку:

Но если вы щелкнете по ней мышью, то увидите полноразмерное изображение, изящно размещённое в центре окна, как показано на рисунке:

Что ещё лучше – весь материал, находящийся под лайтбоксом, затеняется, так что ваш взгляд теперь целиком обращён на содержимое в центре экрана.

Ничего страшного, если вы не знакомы с термином «лайтбокс» («lightbox»). Этот таинственный термин используется в фотографических кругах. В доцифровые времена фотографы называли лайтбоксом коробку примерно 15 см глубиной и около 60 см шириной по обеим сторонам, со специальным белым прозрачным пластиком сверху. Источник света изнутри равномерно освещал эту поверхность. Разместив на лайтбоксе какой-нибудь слайд или негатив и воспользовавшись специальной лупой (которая на самом деле была обычным увеличительным стеклом), вы могли внимательно рассмотреть каждую отдельную картинку. Можно представить, что лайтбокс на рисунке 4 - это тоже фотография, которую вы рассматриваете на лайтбоксе через лупу. Вот такой термин.

Но что произойдёт, если вместо картинки вы захотите подсветить какой-нибудь текст?

Текстовый лайтбокс

Другой вариант реализации лайтбокса был применён на сайте под названием Particle Tree. Там была осуществлена возможность отображения сколь угодно сложного HTML-кода, полученного с сервера при помощи Ajax. Я пользуюсь этим средством, когда нужно показать пользователю какой-нибудь дополнительный текст.

Код главной страницы.

Если открыть этот код в браузере, то можно увидеть такую страницу:

Если вы щелкнете мышью по тексту, то увидите лайтбокс с содержимым страницы, как показано на рисунке:

Текстовый лайтбокс - это отличный способ предоставить пользователю дополнительную информацию о продукте или статье из списка, не требующий покидать страницу. Вместо этого вы используется обходной путь предоставления пользователю дополнительной информации. Как в любом HTML-коде, здесь может быть текст, картинки или даже формы – для регистрации, аутентификации или комментариев.

Окна

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

Ajax-запросы, использующиеся для получения информации, которая должна быть отображена в рамке окна, также реализуются через библиотеку Prototype. Начнём:

Здесь при щелчке по кнопке Show window JavaScript-код создаёт новое окно заданной ширины, высоты, с назначенным заголовком и содержимым, полученным с заданного URL, и отображает его в центре окна браузера с помощью метода showCenter().

Далее приведен HTML-код, который должен быть отображён в окне.

Открыв index.html в браузере, мы увидим следующее:

Пока здесь почти не на что смотреть, но если кликнуть на ссылку, то увидим наше окно:

Окошко выглядит пресновато, но определённо привлекает к себе внимание. Совершенно не обязательно делать его зелёным - можно выбрать любой другой скин.

Плавно появляющиеся сообщения

Существует ещё один новый способ взаимодействия с пользователями — это плавно появляющиеся сообщения — сообщения, возникающие в заранее неизвестном пользователю, но хорошо видном месте, сообщая о каком-то важном событии. В данном случае для реализации плавно появляющегося сообщения используется библиотека эффектов Scriptaculous, которая также работает на Prototype.js.

Начнём с html-страницы

  
<html><head>
<style>
.alert { 
 opacity: 0.0;
 border:2px dashed black;
 padding:5px;
 background:#eee;
 font-family: arial, verdana;
 font-weight: bold; }
</style>
<script src="lib/prototype.js"></script>
<script src="src/effects.js"></script>
<script>
function submit()
{
 new Ajax.Updater( 'result', 'alert.html', {
 method: 'get',
 onSuccess: function() {
 new Effect.Opacity('result',
 { duration: 2.0, from: 0.0, to: 1.0 } );
 new Effect.Opacity('result',
 { delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
 } }
 );
}
</script>
</head><body>
<div id="result" class="alert"></div><br/><br/>
<button onclick="submit()">Submit</button>
</body></html>

В идеале на странице расположена некая форма с кнопкой Submit для подтверждения. И когда пользователь на неё нажимает, данные из формы отправляются на сервер, который, в свою очередь, генерирует соответствующее ответное сообщение. Это сообщение затем плавно появляется на экране и через некоторое время также плавно исчезает. В данном примере я опустил элементы формы, так что мы увидим только кнопку подтверждения.

Кнопка Submit отправляет Ajax-запрос на страницу alert.html. Полученные данные затем помещаются внутри тега <div> с id="result", плавное появление и исчезновение которого реализуется классами эффектов библиотеки Scriptaculous.

И снова нам пока особо не на что смотреть. Представьте, что над кнопкой Submit расположены поля формы с какими-то данными.

При нажатии на Submit плавно появляется сообщение.

Это не только простой, но и эффективный способ взаимодействия с пользователями. Если не злоупотреблять этим приёмом, появляющиеся и исчезающие объекты на вашей странице будут вызывать у пользователя острое желание получить информацию. Это связано с инстинктом выживания, передающимся из поколения в поколение. Так что вашей информации обязательно будет уделено внимание. Пока этот приём используется правильно, он является мощным средством быстрого привлечения внимания пользователя.