Эта заметка является продолжением предыдущей статьи (перевода) "Поиск для блога с помощью Google AJAX Search API и jQuery ".
После её написания я задумался о том, где будет удачнее всего расположить такую форму и ковёр результатов, кроме отдельной страницы. Идея не заставила себя долго ждать: логично попробовать поиск с результатами во всплывающем окне.
Сначала демка :
В качестве "фундамента" для всплывающего поиска я выбрал jQuery плагин модальных окон под названием Reveal . Он легковесный, без лишних элементов и очень просто подключается.Установка Reveal
.
В секцию шаблона прописываются линки на скрипт и стили:
Не забудьте, что в архив плагина есть картинка png, которую нужно положить в свой альбом пикасы и прописать путь к ней в reveal.css
.
Следущий шаг - инициализировать плагин "настроечным
" скриптом
(кладём туда же):
Потом определяем содержимое всплывшего окна
(это кладём в тело поста):
сюда вставляем все коды поиска из статьи "Поиск для блога с помощью Google AJAX Search API и jQuery".
Согласно моему комментарию внутри этого кода, копипастим туда весь "гуглопоиск" , о котором идёт сейчас речь. В шаблоне стилей css придётся увеличить площадь белого квадрата.
И последний шаг - сама ссылка на модальное окно
, которая может быть как текстовой, так и графической. Код ссылки в виде картинки (тоже в тело поста):
У Reveal
, плагина модальных окон, есть два вида анимации: fade и fadeAndPop
, регулируемая скорость выполнения эффекта: animationspeed: 300
, и возможность закрыть всё окно, кликнув по затемнённому фону: closeonbackgroundclick: true
.
Эти настройки записываются в "настроечный" скрипт (см. выше):
$("#myModal").reveal({ animation: "fadeAndPop", //fade, fadeAndPop, none animationspeed: 300, //how fast animtions are closeonbackgroundclick: true, //if you click background will modal close? dismissmodalclass: "close-reveal-modal" //the class of a button or element that will close an open modal });
Или же эти опции можно подключать через ссылку
на модальное окно (см. выше)
Следует понимать, что такая схема с поиском в отдельном окне
- чистой воды эксперимент и требует более тщательной кастомизации.
Поле поиска для сайта — один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте.
В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.
1. Разметка HTML
Элемент