Ajax и XML: Создание лайтбоксов с использованием Ajax

Использование приёмов Ajax для создания лайтбоксов, всплывающих подсказок, окон и плавно появляющихся сообщений

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

Джэк Хэррингтон, старший инженер по программному обеспечению, Studio B

Джэк Д. Хэррингтон (Jack D. Herrington) - старший инженер по программному обеспечению с более чем двадцатилетним стажем. Он является автором трех книг: Code Generation in Action, Podcasting Hacks и PHP Hacks. Также им написано более тридцати статей.



26.09.2008

Возможно, это и выдумка, но я слышал, что много лет назад проводился такой эксперимент по взаимодействию пользователей с приложениями: под сиденьем, на котором сидел человек, работающий за компьютером в некоем приложении, закреплялась стодолларовая купюра. При этом в строке состояния окна приложения сообщалось: "Под вашим сиденьем прикреплено $100". Никто из участников эксперимента так и не нашёл деньги и не затребовал их. Это говорит о том, насколько слабо строка состояния воздействует на пользователя и как сложно сегодня привлечь внимание человека.

В этой статье рассмотрен ряд приёмов на базе PHP, динамического HTML (DHTML), и асинхронного JavaScript™ + XML (Ajax), позволяющих выводить информацию прямо перед глазами пользователя так, что он уже не сможет не обратить на неё внимания.

Подсказки

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

Листинг 1. index.html
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="tooltip.js" type="text/javascript"></script>
<style>
body { font-family: arial,verdana; }
.popup { padding:10px; border:1px solid #ccc;
 background:#eee; width:250px; font-size: small; }
</style>
</head>
<body>
<div id="book1">Code Generation In Action</div>
<div id="popup1" class="popup">
</div>
</body>
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('book1', 'popup1')
</script>
</html>

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

В листинге 2 приведён код содержимого подсказки.

Листинг 2. text.php
An excellent book on code generation and generative programming
by Jack Herrington.

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

Рисунок 1. Текст до того как на него навели мышку
Текст до того как на него навели мышку

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

Рисунок 2. Всплывающяя подсказка
Всплывающяя подсказка

Наглядный демонстрационный пример всплывающей подсказки

Посмотрите наглядный online-пример всплывающей подсказкиOpen link to view tooltip demo in new window.

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


Лайтбоксы

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

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

Листинг 3. index.html
<html>
<head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="images/megan1_400_320.jpg" rel="lightbox">
<img src="images/megan1_400_320.jpg" width="100" height="80"
  alt="Megan" border="0" /></a>
</body>
</html>

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

Рисунок 3. Картинка до щелчка мышью
Картинка до щелчка мышью

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

Рисунок 4. Лайтбокс с полноразмерным изображением
Лайтбокс с полноразмерным изображением

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

Наглядный демонстрационный пример лайтбокса

Посмотрите наглядный online-пример использования лайтбоксаНаглядный демонстрационный пример лайтбокса.

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

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

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

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

В листинге 4 приведён код главной страницы.

Листинг 4. index.html
<html>
<head>
<title>
Lightbox Text Test
</title>
<link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" media="screen,projection" 
  type="text/css" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
</head>
<body>
<a href="text.php" class="lbOn">More About This Article</a>
</body>
</html>

А в листинге 5 можно видеть HTML-код, который получен с помощью Ajax и затем выведен на экран.

Листинг 5. text.php
<p>This article covers the basics of AJAX Lightbox that
shows text blocks instead of images</p>

<p><a href="#" class="lbAction" rel="deactivate">
Return to article list</a></p>

Если открыть этот код в браузере, то можно увидеть что-то вроде рисунка 5.

Рисунок 5. Текст, по которому можно щелкнуть для получения дополнительной информации
Текст, по которому можно щелкнуть для получения дополнительной информации

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

Рисунок 6. Текстовый лайтбокс в действии
Текстовый лайтбокс в действии

Наглядный демонстрационный пример использования текстового лайтбокса

Посмотрите наглядный online-пример использования текстового лайтбоксаНаглядный демонстрационный пример использования текстового лайтбокса.

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


Окна

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

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

Листинг 6. index.html
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script> 
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>

<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<a href="javascript:void showWindow();">Show Window</a>
<script>
function showWindow()
{
  win = new Window( { className: 'spread', url: 'test.html',
    title: 'Simple Window', width:400,
    height:300, destroyOnClose: true, recenterAuto:false } ); 
  win.showCenter();
}
</script>
</body>
</html>

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

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

Листинг 7. test.html
<h1>Registration</h1>
<p>You need to first register the product before...</p>

Открыв index.html в браузере, мы увидим что-то вроде рисунка 7.

Рисунок 7. Ссылка на окно
Ссылка на окно

Пока здесь почти не на что смотреть, но если кликнуть на ссылку, то… вау! Изменения видны на рисунке 8.

Рисунок 8. Появившееся окно
Появившееся окно

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

Но мы на самом деле хотели сделать в окне форму, верно? В частности, допустим, я хочу сделать форму аутентификации на главной странице, которая будет появляться при клике на кнопку Login. В листинге 8 приведён код такой страницы.

Листинг 8. form.php
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script> 
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>

<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>

<div id="myloginform" style="display:none;overflow:clip;padding:10px;">
<form id="loginfrm">
<table>
<tr><td>Login</td><td><input type="text" name="name" /></td></tr>
<tr><td>Password</td><td><input type="password" name="password" /></td></tr>
</table>
</form>
<button onclick="login()">Login</button>
</div>

<a href="javascript:void showWindow();">Login</a>
<script>
var g_loginWindow = null;

function login()
{
  new Ajax.Request( 'login.php', {
    parameters: $('loginfrm').serialize(),
    method: 'post',
    onSuccess: function( transport ) {
       g_loginWindow.close();
    }
  } );
}

function showWindow()
{
  g_loginWindow = new Window( { className: 'spread', title: "Login",
    destroyOnClose: true,
    onClose:function() { $('myloginform').style.display = 'none'; } } ); 
  g_loginWindow.setContent( 'myloginform', true, true );
  g_loginWindow.showCenter();
}
</script>

</body>
</html>

Этот код изначально выводит только содержимое основной страницы. Но, когда пользователь щелкает по кнопке Login в форме, с помощью объекта Ajax.Request на сервер отправляется запрос на аутентификацию. В листинге 9 приведён скрипт аутентификации, который на практике, конечно же, значительно сложнее.

Листинг 9. login.php
<true />

Теперь, если открыть эту страницу в браузере, мы увидим ссылку на аутентификацию, как показано на рисунке 9.

Рисунок 9. Ссылка на аутентификацию
Ссылка на аутентификацию

Теперь, если вы щелкните по ссылке, то появится симпатичное окошко аутентификации в стиле Web 2.0, изображённое на рисунке 10.

Рисунок 10. Окно аутентификации
Окно аутентификации

Наглядный демонстрационный пример создания окна

Посмотрите наглядный online-пример создания окнаНаглядный демонстрационный пример создания окна.

При щелчке по кнопке Login имя пользователя и пароль отправляются на сервер, который может проверить полномочия пользователя и, например, установить соответствующий cookie или перенаправить (редиректом) его на домашнюю страницу.

Окошки – это именно то, что может сделать ваше приложение эффектнее и создать у пользователя впечатление, что он использует что-то больше похожее на традиционное настольное приложение, чем на Web.


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

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

Начнём с html-страницы в листинге 10.

Листинг 10. index.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.

В листинге 11 приведён код для alert.html.

Листинг 11. alert.html
A new record has been added.

Открыв эту страницу в браузере, мы увидим что-то вроде рисунка 11.

Рисунок 11. Кнопка подтверждения формы
Кнопка подтверждения формы

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

При нажатии на Submit плавно появляется сообщение, показанное на рисунке 12.

Рисунок 12. Плавно появляющееся сообщение о добавлении новой записи
Плавно появляющееся сообщение о добавлении новой записи

Наглядный демонстрационный пример плавно появляющегося сообщения

Посмотрите наглядный online-пример плавно появляющегося сообщенияНаглядный демонстрационный пример плавно появляющегося сообщения.

Через несколько секунд сообщение плавно «растворяется».

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

Заключение

Будем надеяться, что прочтение этой статьи поможет вам овладеть рядом новых оригинальных приёмов, позволяющих осуществлять взаимодействие с пользователями и выдавать им предупредительную информацию. Со временем, я уверен, этими приёмами также начнут злоупотреблять, и они станут настолько же неэффективны, как и строка состояния. Но пока они позволяют привлекать внимание пользователей забавными и в то же время весьма эффективными способами в стиле Web 2.0.


Загрузка

ОписаниеИмяРазмер
Sample codex-ajaxxml6-lightbox.zip1573KB

Ресурсы

Научиться

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML
ArticleID=341817
ArticleTitle=Ajax и XML: Создание лайтбоксов с использованием Ajax
publish-date=09262008