<
  • Главная
Статьи

Ajax і XML: Створення лайтбоксів з використанням Ajax

  1. Серія контенту:
  2. Цей контент є частиною серії: Ajax і XML
  3. підказки
  4. Лістинг 1. index.html
  5. Лістинг 2. text.php
  6. Малюнок 1. Текст до того як на нього навели мишку
  7. Малюнок 2. підказці
  8. лайтбокси
  9. Лістинг 3. index.html
  10. Малюнок 3. Картинка до клацання мишею
  11. Малюнок 4. Лайтбокс з повнорозмірним зображенням
  12. текстовий лайтбокс
  13. Лістинг 4. index.html
  14. Лістинг 5. text.php
  15. Малюнок 5. Текст, за яким можна клацнути для отримання додаткової інформації
  16. Малюнок 6. Текстовий лайтбокс в дії
  17. вікна
  18. Лістинг 6. index.html
  19. Лістинг 7. test.html
  20. Малюнок 7. Посилання на вікно
  21. Малюнок 8. Що з'явилося вікно
  22. Лістинг 8. form.php
  23. Лістинг 9. login.php
  24. Малюнок 9. Посилання на аутентифікацію
  25. Малюнок 10. Вікно аутентифікації
  26. Плавно з'являються повідомлення
  27. Лістинг 10. index.html
  28. Лістинг 11. alert.html
  29. Малюнок 11. Кнопка підтвердження форми
  30. Малюнок 12. Плавно з'являється повідомлення про додавання нового запису
  31. висновок
  32. Ресурси для скачування

Ajax і XML

Використання прийомів Ajax для створення лайтбоксів, спливаючих підказок, вікон і плавно з'являються повідомлень

Серія контенту:

Цей контент є частиною # з серії # статей: Ajax і XML

https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=ajax+и+xml

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Ajax і XML

Слідкуйте за виходом нових статей цієї серії.

Можливо, це і вигадка, але я чув, що багато років тому проводився такий експеримент із взаємодії користувачів з додатками: під сидінням, на якому сидів чоловік, який працює за комп'ютером в якомусь додатку, закріплювалася стодолларовая купюра. При цьому в рядку стану вікна програми повідомлялося: "Під вашим сидінням прикріплено $ 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. підказці

Підказки - це простий спосіб «розвантажити» сторінку і в той же час зберегти можливість доступу до контенту, якщо він раптом знадобиться відвідувачам сторінки. Якщо користувач хоче отримати додаткові відомості про якомусь елементі сайту, він може просто навести на нього курсор миші, і з'явиться підказка з більш детальною інформацією. Причому ця інформація може мати довільно складну структуру, містити картинки, таблиці і форматування.

лайтбокси

Лайтбокси - це новий і найбільш оригінальний спосіб звернути увагу користувача на якийсь конкретний елемент. Так, в нижчеподаному прикладі, сторінка містить зменшену картинку (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. Текстовий лайтбокс в дії

Текстовий лайтбокс - це відмінний спосіб надати користувачеві додаткову інформацію про продукт або статті зі списку, який не потребує залишати сторінку. Замість цього ви використовується обхідний шлях надання користувачеві додаткової інформації. Як в будь-якому 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. Плавно з'являється повідомлення про додавання нового запису

Через кілька секунд повідомлення плавно «розчиняється».

Це не тільки простий, але і ефективний спосіб взаємодії з користувачами. Якщо не зловживати цим прийомом, з'являються і зникають об'єкти на вашій сторінці будуть викликати у користувача гостре бажання отримати інформацію. Це пов'язано з інстинктом виживання, що передається з покоління в покоління. Так що вашій інформації обов'язково буде приділено увагу. Поки цей прийом використовується правильно, він є потужним засобом швидкого залучення уваги користувача.

висновок

Будемо сподіватися, що прочитання цієї статті допоможе вам опанувати поруч нових оригінальних прийомів, що дозволяють здійснювати взаємодію з користувачами і видавати їм попереджувальну інформацію. Згодом, я впевнений, цими прийомами також почнуть зловживати, і вони стануть настільки ж неефективні, як і рядок стану. Але поки вони дозволяють привертати увагу користувачів кумедними і в той же час досить ефективними способами в стилі Web 2.0.

Ресурси для скачування

Схожі теми

  • оригінал статті Ajax for lightboxes (EN) .
  • Домашня сторінка PHP : Відвідайте цей безцінний для PHP-програмістів ресурс. (EN)
  • бібліотека Prototype : Вивчіть цю середу для JavaScript, створену спеціально для того, щоб спростити розробку динамічних Web-додатків. (EN)
  • JavaScript-бібліотека Scriptaculous : Познайомтеся з цією заснованої на Prototype середовищем, що надає безліч засобів для створення підказок і ефектів, що роблять ваш Web-сайт «легше» і динамічніше. (EN)
  • Бібліотека Lightbox JS 2.0 : Відкрийте для себе відмінний спосіб створення лайтбоксів для картинок. (EN)
  • Lightbox розбушувався! : В цьому коді з сайту Particle Tree використовується більш гнучкий підхід до лайтбокси. (EN)
  • Xilinus.com : На Xilinus'е можна знайти бібліотеку Window для створення віконець. (EN)
  • Сторінка документації по Prototype.js : Додаткова інформація про JavaScript-бібліотеці Prototype з посиланнями на офіційний блог Prototype і на безліч інших ресурсів. (EN)
  • jQuery : Вивчіть ще одну JavaScript-бібліотеки, функціонально схожу на Prototype.js. (EN)
  • Yahoo! Бібліотека призначеного для користувача інтерфейсу (User Interface Library) : Ознайомтеся з інструментарієм (toolkit), який надає Yahoo! для Ajax. (EN)
  • Розділ XML на developerWorks : Все про XML на відповідному розділі developerWorks.
  • Сертифікація IBM XML : Дізнайтеся, як ви можете отримати від IBM Сертифікат розробника в XML і суміжних з XML областях. (EN)
  • Технічна бібліотека XML : В цьому розділі developerWorks XML наведено широкий перелік технічних статей і порад, інструкцій, стандартів і керівництв IBM Redbook. (EN)
  • Ajaxian : Ajaxian - це відмінний ресурс, також дозволяє залишатися в курсі розробок в сфері Ajax.

Підпишіть мене на повідомлення до коментарів

Jsp?
Js?
Але що станеться, якщо замість картинки ви захочете підсвітити якийсь текст?
Але ми насправді хотіли зробити у вікні форму, вірно?


Новости
  • Виртуальный хостинг

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

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью