Несколько лет назад, когда я обсуждал все за и против использования AJAX с моими клиентами, я долго и упорно отговаривал людей использовать методы AJAX: рассказывал о пугающих вариантах развития событий, таких как потеря браузерной функциональности, утрата доступа к специальным пользовательским функциям и т.д. Несмотря на то, что некоторая часть представленных проблем все еще актуальна, большинство «ужасов реализации» осталось в прошлом благодаря внедрению jQuery.

Если вы не сталкивались с AJAX, то вам полезно будет узнать, что AJAX — это не технология, и не язык! Акроним расшифровывается как «Asynchronous JavaScript and XML» («асинхронный JavaScript и XML»). AJAX — это метод использования Javascript и XML, позволяющий совершать обмен данными между браузером и веб-сервером. Чаще всего AJAX применяется для динамического обновления некоторой части контента без перезагрузки всей страницы.

AJAX — это акроним, придуманный экспертом по информационной архитектуре, основателем www.AdaptivePath.com Джесси Джеймсом Гарреттом (Jesse James Garrett) в 2005 году. Это слово быстро укоренилось в профессиональном лексиконе веб-разработчиков и получило широкое распространение. В данной главе мы бросим беглый взгляд на то, что в действительности представляет собой AJAX, как с помощью данной технологии можно упростить реализацию различных решений для наших гипотетических клиентов, а также выполним несколько небольших проектов.

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

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

В предыдущей статье мы добились реализации вкладок с помощью добавления ul списка заголовков и последующего размещения основного контента в div блоках. Данный подход хорош тем, что информация будет доступна даже в браузерах с отключенным Javascript. Однако в некоторых случаях гораздо проще бывает заранее сгенерировать DOM объекты, необходимые для вкладок, что основывается на применении jQuery.

Для начала мы перейдем к теме клиента и установим цикл, который будет выводить записи только из рубрики Our Structure. Затем, с помощью jQuery UI, мы выведем на экран записи в виде ряда вкладок, что позволит нам сэкономить пространство сайта и предоставить пользователям доступ к наиболее важной и полезной информации без необходимости длительного пролистывания сайта.

jQuery UI обладает встроенным плагином Color, который позволяет выполнять цветовую анимацию. В пятой главе мы уже успели познакомиться с плагином Color, входящим в сборку WordPress. В данном разделе мы выполним цветовую анимацию при помощи jQuery UI.

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

Вне зависимости от того, каким образом вы подключили jQuery UI к собственной теме (с помощью собственной загрузки, сборки WordPress или Google CDN), вам необходимо будет привязать к плагину некоторые CSS стили.