Blogger не для чайников: Всплывающее окно поиска по сайту

Эта заметка является продолжением предыдущей статьи (перевода) "Поиск для блога с помощью Google AJAX Search API и jQuery".
После её написания я задумался о том, где будет удачнее всего расположить такую форму и ковёр результатов, кроме отдельной страницы. Идея не заставила себя долго ждать: логично попробовать поиск с результатами во всплывающем окне.

Сначала демка:

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

Установка Reveal.
В секцию <head></head> шаблона прописываются линки на скрипт и стили:

<link rel="stylesheet" href="http://ваш-хостинг.ру/reveal/reveal.css">
<script src="http://ваш-хостинг.ру/reveal/jquery.reveal.js" type="text/javascript"></script>

Не забудьте, что в архив плагина есть картинка png, которую нужно положить в свой альбом пикасы и прописать путь к ней в reveal.css.

Следущий шаг - инициализировать плагин "настроечным" скриптом (кладём туда же):

<script type="text/javascript">
$(document).ready(function() {
     $('#myButton').click(function(e) {
          e.preventDefault();
   $('#myModal').reveal();
     });
});
</script>

Потом определяем содержимое всплывшего окна (это кладём в тело поста):

<div id="myModal" class="reveal-modal">
<h1>
Поиск по блогу↓</h1>
<p>
сюда вставляем все коды поиска из статьи "Поиск для блога с помощью Google AJAX Search API и jQuery".
</p>
<a class="close-reveal-modal">&#215;</a>
</div>

Согласно моему комментарию внутри этого кода, копипастим туда весь "гуглопоиск", о котором идёт сейчас речь. В шаблоне стилей css придётся увеличить площадь белого квадрата.

И последний шаг - сама ссылка на модальное окно, которая может быть как текстовой, так и графической. Код ссылки в виде картинки (тоже в тело поста):

<a href="#" data-reveal-id="myModal" style="margin-left:1em; margin-right:1em"><img border="0" height="180" width="300" src="http://1.bp.blogspot.com/-yC8JEDiA3xY/Tq-6iolROmI/AAAAAAAAGwE/DrEDJ5ksxMw/s320/blog-search.png"></a>

У 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
});

Или же эти опции можно подключать через ссылку на модальное окно (см. выше)

<a href="#" data-reveal-id="myModal" data-animation="fadeAndPop" data-animationspeed="300" data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal">Click for a modal</a>

Следует понимать, что такая схема с поиском в отдельном окне - чистой воды эксперимент и требует более тщательной кастомизации.

4 комментария:

Zamkadnyi5 ноября 2011 г. в 17:40
Просто супер! Уже прикрутил к одному сайту.
Поиск видео организован не по сайту-блогу, а по youtube как не устанавливай радио.
ОтветитьУдалить
Ответы
aldous5 ноября 2011 г. в 18:23
Вы правы :)
Я ещё хотел вытянуть коеч-то из динамических шаблонов (там тот же принцип), ну гугл попрятал скрипты на своих серверах.
ОтветитьУдалить
Ответы
Unknown24 апреля 2014 г. в 21:22
А у меня не получается - не могу подключить свой сайт к этой системе. Не пойму, в чём может быть ошибка. А вот вэб-поиск работает.
ОтветитьУдалить
Ответы
Unknown24 апреля 2014 г. в 21:23
Подскажите, пожалуйста, что я делаю не так??? Ну, правда, у меня обычный сайт, не на Blogger...
ОтветитьУдалить
Ответы

Добавить комментарий