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

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

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

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

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

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

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

Вы можете подключить плагин jQuery UI через Google CDN. Путь, по которому расположен плагин, имеет следующий вид: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js. Здесь 1.8.0 — это версия плагина; она может различаться в зависимости от требований разработчика. Если вы используете jQuery 1.3.2, то вам понадобится взять за основу jQuery UI 1.7.2. Если же вы используете jQuery 1.4.2, то в таком случае 1.8.0 — подходящая версия jQuery UI.

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

Вне зависимости от того, какой вариант подключения плагина вы выбрали, вам понадобится выполнить соответствующую стилизацию используемых элементов интерфейса. Вы всегда можете подключить одну из готовых тем к вашему проекту, либо создать свою собственную на основе определенных стилей. Для просмотра существующих тем достаточно перейти в раздел Themes официального сайта jQuery UI, либо ввести в браузере адрес http://jqueryui.com/themeroller/.