Полезные утилиты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Пользовательский интерфейс jQuery UI . . . . . . . . . . . . . . . .28
Подключаемые модули . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Соблюдение чистоты разметки . . . . . . . . . . . . . . . . . . . . . . .30
Повсеместное использование . . . . . . . . . . . . . . . . . . . . . . . .30
А в чем заключаются недостатки? . . . . . . . . . . . . . . . . . . . . . . . . .31
Загрузка и включение библиотеки jQuery в веб-страницы . . . . . . . .32
Загрузка библиотеки jQuery . . . . . . . . . . . . . . . . . . . . . . . . .32
Сеть Google CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Сборки Nightly и система контроля версий Subversion . . . . . .34
или сжатый? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Анатомия сценария jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Псевдоним jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Анализ оператора jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . .36
Биты HTML, также называемые объектной моделью документа . . . .37
Если вам понравилась библиотека jQuery… . . . . . . . . . . . . . . . . . . .39
Глава 2. Выборка, украшение и расширение
функциональности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Проверяем, загрузилась ли веб-страница полностью . . . . . . . . . . . .41
Выборка: ключевой аспект jQuery . . . . . . . . . . . . . . . . . . . . . . . . . .42
Простая выборка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42
Сужаем рамки выборки . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Проверка выборки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Фильтры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Выборка множественных элементов . . . . . . . . . . . . . . . . . . .46
Обеспечение выборки на должном уровне . . . . . . . . . . . . . .46
Украшение: технология CSS в сочетании с библиотекой jQuery . . . .47
Просмотр CSS-свойств . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47
Настройка CSS-свойств . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48
Классы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50
Добавление и удаление классов . . . . . . . . . . . . . . . . . . . . . .51
Расширение функциональности: добавляем эффекты
с использованием jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
Скрытие и отображение элементов . . . . . . . . . . . . . . . . . . . .53
Отображение скрытых элементов . . . . . . . . . . . . . . . . . . . . .54
Переключение элементов . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Поступательное расширение функциональности . . . . . . . . . . . . . . .56
Добавление новых элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Удаление существующих элементов . . . . . . . . . . . . . . . . . . . . . . . .59
Модификация содержимого . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61
Базовая анимация: эффектное скрытие и отображение
элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61
Отображение и скрытие элементов путем изменения
их прозрачности с помощью функций fadeIn и fadeOut . . .62
Переключение эффектов и анимаций . . . . . . . . . . . . . . . . . .62
Функции Callback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
Некоторые хитрости . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64
Подсветка элементов при наведении
на них указателя мыши . . . . . . . . . . . . . . . . . . . . . . . . . .64
Разворачиваемый спойлер . . . . . . . . . . . . . . . . . . . . . . . . . .65
Перед тем как перейти к следующей главе . . . . . . . . . . . . . . . . . . .67
Глава 3. Анимация, прокрутка и изменение размеров . . . . . . . . . .68
Анимация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68
Анимация CSS-свойств . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68
Цветовая анимация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
Замедление . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
Развитое замедление . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
Выскакивающие панели . . . . . . . . . . . . . . . . . . . . . . . . . . . .74
Очередь анимаций . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76
Объединение действий в цепочку . . . . . . . . . . . . . . . . . . . . .77
Приостановка выполнения цепочки . . . . . . . . . . . . . . . . . . .78
Анимированная навигация . . . . . . . . . . . . . . . . . . . . . . . . . .79
Анимированная навигация. Дубль 2 . . . . . . . . . . . . . . . . . . .81
Библиотека пользовательского интерфейса jQuery UI . . . . . .83
Создаем анимацию! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86
Прокрутка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86
Событие scroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86
Плавающая панель навигации . . . . . . . . . . . . . . . . . . . . . . .87
Прокрутка документа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89
Специальные полосы прокрутки . . . . . . . . . . . . . . . . . . . . . .91
Изменение размеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Событие resize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93
Переключатель макетов . . . . . . . . . . . . . . . . . . . . . . . . . . . .93
Элементы, поддерживающие изменение размеров . . . . . . . .95
Элементы textarea, поддерживающие изменение
размеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96
Разделитель панелей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98
Вот как осуществляется прокрутка. И анимация . . . . . . . . . . . . . . 102
Глава 4. Изображения и слайд-шоу . . . . . . . . . . . . . . . . . . . . . . . . 103
Лайтбоксы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Специальные (пользовательские) лайтбоксы . . . . . . . . . . . 103
Устранение неполадок с использованием console.log . . . . . . 107
ColorBox: подключаемый лайтбокс-модуль . . . . . . . . . . . . . 109
Обрезка изображений при помощи Jcrop . . . . . . . . . . . . . . . . . . . . 111
Слайд-шоу . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Слайд-шоу из изображений с перекрестным
изменением прозрачности . . . . . . . . . . . . . . . . . . . . . . . 114
Слайд-шоу с поддержкой прокрутки . . . . . . . . . . . . . . . . . . 128
iPhoto-подобный виджет слайд-шоу . . . . . . . . . . . . . . . . . . 134
Задумайтесь, сколького мы уже достигли! . . . . . . . . . . . . . . . . . . . 140
Глава 5. Меню, вкладки, подсказки и панели . . . . . . . . . . . . . . . . 142
Меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Разворачиваемые/сворачиваемые меню . . . . . . . . . . . . . . . 143
Индикаторы Открыто/Закрыто . . . . . . . . . . . . . . . . . . . . . . 147
Разворачивание меню при наведении указателя мыши . . . . 149
Выпадающие меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Меню типа «аккордеон» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Простой аккордеон . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Многоуровневые аккордеоны . . . . . . . . . . . . . . . . . . . . . . . 158
Аккордеон библиотеки пользовательского
интерфейса jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Вкладки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Базовые вкладки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Вкладки библиотеки пользовательского
интерфейса jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Панели различных размеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Выдвигающаяся форма ввода данных для входа . . . . . . . . . 167
Выдвигающийся оверлей . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Подсказки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Простые подсказки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Подсказки продвинутого типа . . . . . . . . . . . . . . . . . . . . . . . 175
Собственный подход . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182
Глава 6. Конструкция, Ajax и интерактивность . . . . . . . . . . . . . . . 183
Конструкция и рекомендуемые методики . . . . . . . . . . . . . . . . . . . 183
Написание более аккуратного программного
кода jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Клиентские шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Анализ браузеров (…это плохо!) . . . . . . . . . . . . . . . . . . . . . 191
Знакомимся с Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Что такое Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Загрузка удаленного HTML-содержимого . . . . . . . . . . . . . . . 194
Расширяем функциональность гиперссылок
при помощи Hijax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Выборка HTML-содержимого при помощи селекторов . . . . . 196
Продвинутая загрузка . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Задел на будущее: методы live и die . . . . . . . . . . . . . . . . . . 198
Выборка данных при помощи $.getJSON . . . . . . . . . . . . . . . 199
Клиентский Twitter-поисковик . . . . . . . . . . . . . . . . . . . . . . . 200
«Рабочая лошадка» Ajax в jQuery . . . . . . . . . . . . . . . . . . . . 201
Общие настройки Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Загрузка внешних сценариев при помощи $.getScript . . . . . 203
Запросы GET и POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Ajax-события в jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Интерактивность: используем Ajax . . . . . . . . . . . . . . . . . . . . . . . . 205
Галерея изображений Ajax . . . . . . . . . . . . . . . . . . . . . . . . . 206
Теггинг изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Есть ли смысл во владении Ajax на высоком
уровне? Убедитесь сами! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Глава 7. Формы, элементы управления и диалоговые окна . . . . . 226
Формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Простая проверка форм . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Проверка форм с помощью подключаемого
модуля Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Индикатор максимальной длины . . . . . . . . . . . . . . . . . . . . . 233
Подсказки в формах . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Установка флажков у всех позиций за один подход . . . . . . 236
Встроенное редактирование . . . . . . . . . . . . . . . . . . . . . . . . 237
Подключаемый модуль Autocomplete . . . . . . . . . . . . . . . . . 241
Элемент управления для присвоения рейтинга на основе
количества звезд . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Элементы управления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Календарь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Ползунки (слайдеры) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Перетаскивание и помещение . . . . . . . . . . . . . . . . . . . . . . .255
Поведение sortable из состава библиотеки
пользовательского интерфейса jQuery UI . . . . . . . . . . . . 262
Полоса хода выполнения . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Диалоговые окна и уведомления . . . . . . . . . . . . . . . . . . . . . . . . . 266
Простое модальное диалоговое окно . . . . . . . . . . . . . . . . . 266
Виджет Dialog из состава библиотеки пользовательского
интерфейса jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Growl-подобные уведомления . . . . . . . . . . . . . . . . . . . . . . . 272
Короткие исчезающие уведомления . . . . . . . . . . . . . . . . . . 275
Мы в хорошей форме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Глава 8. Списки, деревья и таблицы . . . . . . . . . . . . . . . . . . . . . . . 279
Списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Поведение selectable из состава библиотеки
пользовательского интерфейса jQuery UI . . . . . . . . . . . . 280
Сортировка списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Манипулирование выпадающими списками в полях . . . . . . 287
Деревья . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Разворачиваемое дерево . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Делегирование событий . . . . . . . .
