codingПользователь щелкает по заголовку краткой версии новостипредставление! Первым номером у нас будет jQuery Form Plugin, которыйотвечает за передачу форм с помощью AJAX. Плагин действительно важный.Он полностью воплощает идеологию jQuery — «Write less. Do more».Обработка форм практически не отличается от обычной, а в описаниеформы вообще не надо вносить изменения. Достаточно написать обработчикдля оправления формы и изменить код на сервере, чтобы ответбыл не на новой страничке, а на той же, что и форма. Это очень удобно,например, для комментариев к статьям. Клиентский код в простейшемслучае будет очень прост: надо использовать либо метод $(…).ajaxForm,либо $(…).ajaxSubmit, они имеют некоторые различия в своей работе.Хочу отметить, что плагин автоматически поддерживает работу как сJSON, так и с XML, что вкупе с вышеуказанными достоинствами делаетего очень удобным не только для написания приложений, что называется,с нуля, но и для переделки под AJAX существующих сайтов.Matrix uploadedПри программировании форм особняком стоит загрузка файлов, длякоторой можно использовать несколько плагинов. Я остановился на AjaxFileUpload прежде всего потому, что придется вносить минимум измененийв готовый код — как и в предыдущем случае, надо написать клиентскийскрипт и подделать серверный. Плагин добавляет специальный метод$.ajaxFileUpload, которому необходимо передать следующие параметры:Клиент отправляет запрос на сервер, и в правом верхнем углу включаетсяанимацияПараметры метода метод $.ajaxFileUploadurl — адрес скрипта обработчикаfileElementId — input-элемент типа file, который используетсядля загрузки файлаdataType — формат данных, например ‘json’success — функция, которая будет вызвана при успешнойпередаче данныхerror — функция, которая будет вызвана при ошибкеНа кнопку «Загрузка» необходимо повесить обработчик события по клику«return ajaxFileUpload();». Дальше в духовку на двадцать минут — и пирог готов.Табы — всему головаПлагин, созданный Клаусом Хартлом для табов, — действительно мощный(очень рекомендую ознакомиться с полной демкой у него в блоге), и онподдерживает AJAX. Прежде всего опишем табы на HTML:Приходит ответ от сервера, прекращается анимация, отображаетсяполный текст новостиИнтеграция с PHP и PerlФрагмент каскадных таблиц стилей для«Горячих новостей»CSSh2 { cursor: pointer; }#loading, .news-id { display: none; }Все, с низкоуровневыми механизмами разобрались, так что самое страшноепозади. Теперь будем использовать готовенькое – перейдем к обзоруплагинов, которые можно использовать для написания AJAX-приложений.Форма имеет значениеПосмотрим, какие плагины позволят облегчить наш нелегкий труд вебразработчиков.Все адреса плагинов (а также доков и сэмплов) можнонайти во врезке, к тому же я положу это богатство на диск. Что ж начнемPQuery — интеграция с PHPwww.ngcoders.com/php/pquery-php-and-jqueryПроект PQuery — это набор PHP-библиотек для взаимодействия с jQuery.Библиотека совместима с четвертой и пятой версией PHP. Кроме исходногокода, в PQuery в дистрибутив включена документация и демонстрационныескрипты.JQuery-1.05 — интеграция с Perlhttp://search.cpan.org/~peterg/JQuery-1.05Модуль из архива CPAN обеспечивает интеграцию не только с самой библиотекойjQuery, но и с дополнительными модулями. Имеются многочисленныедемки, а вот с доками дела обстоят хуже.118xàêåð 08 /104/ 07
codingСписок табовHTMLПервыйВторойТретийОбычный список, не более того. Подключаем файл с плагином… и начинаемписать код? Ничего подобного! Я бы в качестве слогана для jQueryвыбрал что-то вроде: «Делай, что хочешь, одной строчкой кода!» Длятого чтобы стандартный список ссылок стал табами, надо просто вызватьметод tabs у слоя, в котором он лежит:заполнить данными по вкусу, заблокировать форму $(‘div.form’).block() дополной пересылки данных. Для активации аналогичным образом использоватьметод unblock().$("#article").hide()Немало интересного удалось вставить в узкие рамки статьи, но все жемелкие подробности остались за кадром. Оправдаться могу лишь тем, чтовсе использованные материалы (исходники, доки и прочие вкусности) будутвыложены на диск. Полезно также пройтись по ссылочкам, приведеннымв статье, в особенности посмотреть официальный список плагинов,который достаточно часто пополняется, в том числе и плагинами дляAJAX. Кроме увеличения числа плагинов, улучшается их функционал иразличные опции — стоит скачать новые версии, если они появятся. zДизайн 2.0 и jQueryВключаем табыJavaScript$(‘#tab-container’).tabs({ remote: true });Истинность параметра remote как раз и означает, что содержимое табовбудет загружаться с сервера. И это необязательно статические HTMLфайлы,в реальных приложениях это серверные скрипты. В качествепримечания скажу, что во время написания статьи вышла свежая версияэтого плагина с некоторыми усовершенствованиями, смотри сайт автора.Ставим блокРассмотрим еще один вспомогательный плагин, который используетсядля блокировки интерфейса пользователя. Подобного рода функционалиграет двоякую роль: во-первых, он может показывать пользователю, чтопроисходит процесс передачи данных или другой процесс; во-вторых, онне дает пользователю взаимодействовать с элементами интерфейса вненужный момент, например три раза отправить форму. В качестве дополнительнойвозможности с помощью этого плагина можно организоватьмодальные диалоговые окна. Диспозиция ясна, план готов — в бой.Плагин BlockUI позволяет произвести все необходимые нам действия. Начнемс блокировки страницы в целом. Сценарий, при котором это необходимоделать, встречается достаточно часто. Фактически после любой отправкизапроса на сервер нежелательно, чтобы пользователь взаимодействовал свеб-страничкой до получения ответа. И один из выходов — заблокироватьстраницу в целом, тем более что сделать это очень просто: достаточно вызватьметод $.blockUI(). Если в качестве параметра передать ему идентификаторэлемента веб-страницы, например слоя, то он будет использован в качествесообщения, иначе увидит забугорное «Please wait…» (смотри картинку).Можно передать параметром и HTML-код, тогда будет показан он. Вкачестве рекомендации скажу, что лучше использовать анимированноеизображение, чтобы продемонстрировать, что процесс идет.После того как вызван метод $.blockUI(), можно писать AJAX-код, приполучении ответа сервера интерфейс пользователя автоматическиразблокируется. Но блокировать доступ ко всей странице в целом невсегда хорошо. Более гибкий подход предусматривает отключение толькоопределенных элементов. Если пользователь отправляет данные спомощью формы, то и отключать стоит только ее, с остальными элементамипосетитель сайта должен иметь возможность работать. BlockUIреализует такой вид блокировки при помощи метода $(…).block(). Рецептпрост: форма — 1 шт., jQuery — 1 шт., BlockUI — 1 шт., десяток элементовна форме. jQuery и BlockUI загрузить, форму положить в слой div.form,Пока писал скрипт примера для статьи, поймал себя на мысли, что дизайнстранички получился «дванольным». Действительно, ему присущимногие элементы современных веб-страниц, хотя все действия занялиот силы полчаса. Именно этим объясняется простота страницы — одна изпопулярных концепций современного веб-дизайна :). Обычно ситуациябывает обратная: в дизайне оказывается слишком много элементов и информационногомусора, и страницу приходится «разгружать». Достаточнокрупные шрифты, в том числе и заголовка, также позволяют пользователюбыстро сориентироваться, где он, и прочитать страничку в режиме сканирования,проще говоря, бегло просмотреть.Следующие два элемента были сделаны при помощи JavaScript. Остановимсяна них чуть подробнее. Во-первых, это скругленные уголки, окоторых я уже писал в предыдущих статьях. Они сделаны при помощиплагина к jQuery с непредсказуемым названием corner plugin. Во-вторых,это модный эффект отражения у логотипа. Самое забавное, что отражениея сделал не в Фотошопе ;). Есть достаточно неплохой скрипт reflection.js v1.6, который позволяет делать такие вещи. Надо просто добавить кизображению класс reflect. Есть реализация и для jQuery. Более гибкиенастройки, например прозрачность, также реализуемы. Хочу отметить,что использование JavaScript для создания дизайна уже носит характертенденции, а не дизайнерской прихоти.Дизайн 2.0 с помощью плагинов для jQueryxàêåð 08 /104/ 07119