Мини-поиск: создаем динамичный дизайн для строки поиска на сайте. Адаптация к мобильным часто требует минимизации элементов. К ряду таких элементов относится строка поиска.
На картинке: строка поиска на сайте интернет-магазина угг uggmoda.ru
Определим внешний вид нашего мини поиска. Он у нас будет выступать в трех ипостасях:
- Пассивный — строка поиска не видна, доступен только значок поиска
- Промежуточное состояние мини поиска — строка поиска видна, но поиск по-прежнему неактивен: посетитель нажал значок поиска, но еще ничего не ввел в строку.
- Активный мини поиск — посетитель начал вводить какие-то символы в строку поиска. Активируется кнопка поиска на месте значка, который без активации служит открытию/закрытию строки поиска — а при активации становится действующей кнопкой самого поиска.
Итак, нам надо выполнить следующие работы:
- Прописать в html форму мини поиска.
- Задать стили css для строки поиска, значка мини поиска и активного значка мини поиска.
- Спрограммировать вывод строки поиска при нажатии на значок.
- Спрограммировать закрытие строки поиска (убирается с зоны видимости) при нажатии на значок.
- Спрограммировать активацию значка поиска при вводе в строку поиска каких-то данных.
Всю программную часть мы будем выполнять скриптами jquery. Стили пропишем в CSS. А сейчас пропишем html форму мини поиска на странице:
<div id="welcome2"> <span class="arrm"><i class="ugg-search74"></i></span> <ul><div id="search"> <div class="button-search" style="display: none;"><i class="ugg-search74"></i></div> <input type="text" name="search" placeholder="Поиск" value=""> </div> </ul> </div>
Задаем стили CSS для мини поиска.
#welcome2 .arrm{padding:0;height:38px;width:38px;text-align:center;border:1px solid transparent;} #welcome2.prover .arrm{border:1px solid #636E75;color:#636E75;} #welcome2 > ul{text-align:right;position:absolute; top:0px;right:40px;width:262px; display:none;background:none;height:40px; z-index:1000; margin:0;padding:0; list-style:none}
Строка поиска (css):
#search{position:absolute;top:0px;right:0px;width:260px;z-index:7;} #search .button-search{position:absolute;left:262px;width:40px;height:40px;cursor: pointer;z-index:10001;line-height:40px;background:#636E75;color:#fff;text-align:center;} #search input{margin:0;background:#FFF;padding:0 10px;width: 240px;height: 38px;border: 1px solid #636E75; } #search input:focus{outline:none;}
Адаптация для мобильных (уменьшаем мини поиск, давая пространство другим элементам в «шапке» сайта):
@media (max-width: 767px) { #welcome2 > ul{right:60px} #search{width:180px;} #search input{width:160px;} #search .button-search{left:180px;} }
Программная часть мини поиска выполняется jquery-скриптами (должна быть подгружена jquery-библиотека):
<script type="text/javascript"> $(function() { $('.arrm').click(function() { if($(this).parent().children('ul').css('display') == 'block') { $(this).parent().removeClass("prover"); $(this).parent().children('ul').css('display','none'); } else {$(this).parent().children('ul').css('display','block'); $(this).parent().addClass("prover");} });
Проверяем, введено ли что-то в строку поиска изначально (тут имеется в виду, что человек перешел на страницу поиска по определенному запросу, — именно он может присутствовать при загрузке страницы). Условие «val().length>0″:
if($("#search input").val().length > 0){ $("#search .button-search").css('display','block'); } else {$("#search .button-search").css('display','none');}
Пишем код для активации поиска непосредственно при введении в форму каких-либо данных («keyup»). Если что-то присутствует в строке (определяется условием val.length>0) кнопка поиска активируется, или стерто, кнопка деактивируется:
$("#search input").live("keyup", function() { if($("#search input").val().length > 0){ $("#search .button-search").css('display','block'); } else {$("#search .button-search").css('display','none'); } });
Завершаем скрипт. Строку поиска должен закрывать не только неактивный значок поиска, но и клик по любой области страницы. Добавим это:
$(document).click(function (e){ var div = $(".prover"); if (!div.is(e.target) && div.has(e.target).length === 0) { div.children('ul').css('display','none'); div.removeClass("prover"); } });
Закроем скрипт:
}); </script>
Ок.