Автор

Расширенный поиск на jQuery

Расширенный поиск на jQuery


Форма поиска с расширенными параметрами фильтрации и быстрыми ссылками.

 

ДЕМО
ИСХОДНИКИ

 

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

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

Вот быстрая анимация, которая показывает нашу расширенную форму поиска в действии:

 

Создание структуры

Структура HTML состоит из трех основных элементов: элемента <header>, обертывания основной навигации, div.cd-main-search для формы поиска и основного main.cd-main-content для основного содержимого страницы.

<header class="cd-main-header animate-search">
<div class="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>

<nav class="cd-main-nav-wrapper">
<a href="#search" class="cd-search-trigger cd-text-replace">Search</a>

<ul class="cd-main-nav">
<li><a href="#0">Products</a></li>
<!-- additional navigation items -->
</ul>
</nav>

<a href="#0" class="cd-nav-trigger cd-text-replace">Menu<span></span></a>
</header>

<main class="cd-main-content">
<!-- your content here -->
</main>

<div id="search" class="cd-main-search">
<form>
<input type="search" placeholder="Search...">

<div class="cd-select">
<span>in</span>
<select name="select-category">
<option value="all-categories">all Categories</option>
<!-- additional options here -->
</select>
<span class="selected-value">all Categories</span>
</div>
</form>

<div class="cd-search-suggestions">
<div class="news">
<h3>News</h3>
<ul>
<li>
<a class="image-wrapper" href="#0"><img src="img/placeholder.png" alt="News image"></a>
<h4><a class="cd-nowrap" href="#0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h4>
<time datetime="2016-01-12">Feb 03, 2016</time>
</li>

<!-- additional news here -->
</ul>
</div> <!-- .news -->

<div class="quick-links">
<h3>Quick Links</h3>
<ul>
<li><a href="#0">Find a store</a></li>
<!-- additional quick links here -->
</ul>
</div>
</div> <!-- .cd-search-suggestions -->

<a href="#0" class="close cd-text-replace">Close Form</a>
</div> <!-- .cd-main-search -->

 

Добавление стиля

На небольших устройствах (ширина видового экрана меньше 1024 пикселей) основная навигация и форма поиска находятся на правой стороне, скрытые по умолчанию; Когда пользователь нажимает значок меню, элементы <main> и <header> переводятся влево (применяется класс nav-is-visible), чтобы открыть навигацию.

.cd-main-header, .cd-main-content {
  position: relative;
  transition: transform 0.3s;
}
.cd-main-header.nav-is-visible, .cd-main-content.nav-is-visible {
  transform: translateX(-260px);
}

На больших устройствах форма поиска находится поверх основной навигации, скрытой по умолчанию. Когда пользователь нажимает на элемент .cd-search-trigger, для отображения формы используется класс .is-visible.

@media only screen and (min-width: 1024px) {
  .cd-main-search {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .cd-main-search.is-visible {
    /* search form open */
    opacity: 1;
    visibility: visible;
  }
}

Чтобы вызвать анимацию формы поиска, мы используем класс .animate-search, добавленный в элемент <header>. Этот класс запускает две разные CSS3 анимации: cd-slide-in (для формы поиска) и cd-3d-rotation (для раскрывающегося списка предложений).

@media only screen and (min-width: 1024px) {
.animate-search .cd-main-search.is-visible {
/* trigger search form animation if <header> has the .animate-search class */
animation: cd-slide-in 0.3s;
}
.animate-search .is-visible .cd-search-suggestions {
/* trigger the dropdown animation if <header> has the .animate-search class */
transform-origin: center top;
animation: cd-3d-rotation 0.5s 0.3s;
animation-fill-mode: backwards;
}
}
@keyframes cd-slide-in {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}

@keyframes cd-3d-rotation {
0% {
transform: perspective(1000px) rotateX(-90deg);
}
100% {
transform: perspective(1000px) translateY(0);
}
}

Если вы предпочитаете базовый эффект затухания (а не анимацию формы поиска), вы можете удалить класс .animate-search из элемента <header>.

О выборе категории: чтобы выбор ширины div.cd-select изменялся в соответствии с выбранной пользователем опцией, элемент <select> находится в абсолютном положении (поэтому он не занимает пробел), а значение span.selected-value Используется для отображения выбранной опции (ее текст изменяется, когда пользователь выбирает новый параметр с помощью jQuery).

@media only screen and (min-width: 1024px) {
.cd-main-search .cd-select {
position: absolute;
right: 0;
overflow: hidden;
}
.cd-main-search select {
/* the <select> element is not visible - it is covered by the .selected-value element */
position: absolute;
right: 0;
opacity: 0;
color: transparent;
}
.cd-main-search .selected-value {
color: #ffffff;
pointer-events: none;
}
.cd-main-search select, .cd-main-search .selected-value {
padding: 0.5em 1.7em 0.5em .3em;
font-size: 1.4rem;
border-radius: 3px;
}
}

 

Обработка событий

В исходной структуре HTML навигация находится внутри <header>. На небольших устройствах мы хотели, чтобы навигация была на стороне, скрытой по умолчанию, и нам было легче иметь ее вне <header>. Поэтому мы используем jQuery для этого.
Мы делаем то же самое для div.cd-main-search: по умолчанию он находится вне основной навигации, а на небольших устройствах мы перемещаем его внутри элемента nav.cd-main-nav-wrapper.

var navigationWrapper = $('.cd-main-nav-wrapper'),
navigation = navigationWrapper.children('.cd-main-nav'),
searchForm = $('.cd-main-search'),
navigationTrigger = $('.cd-nav-trigger'),
mainHeader = $('.cd-main-header');

function moveNavigation(){
var screenSize = checkWindowWidth(); //returns 'mobile' or 'desktop'
if ( screenSize == 'desktop' && (navigationTrigger.siblings('.cd-main-search').length == 0) ) {
//desktop screen - insert navigation and search form inside <header>
searchForm.detach().insertBefore(navigationTrigger);
navigationWrapper.detach().insertBefore(searchForm).find('.cd-serch-wrapper').remove();
} else if( screenSize == 'mobile' && !(mainHeader.children('.cd-main-nav-wrapper').length == 0)) {
//mobile screen - move navigation and search form after .cd-main-content element
navigationWrapper.detach().insertAfter('.cd-main-content');
var newListItem = $('<li class="cd-serch-wrapper"></li>');
searchForm.detach().appendTo(newListItem);
newListItem.appendTo(navigation);
}
}

Кроме того, мы использовали jQuery для обнаружения событий щелчка и добавления / удаления классов соответственно и для изменения текста span.selected-value, когда пользователь выбирает другой вариант из раскрывающегося списка <select>.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Расширенный поиск на jQuery

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


Расширенный поиск на jQuery

Пользователи, очевидно, не любят чувствовать себя потерянными, когда они перемещаются по сайту. Именно поэтому мы представили UX-шаблоны, чтобы показать, как они попали на конкретную страницу (хлебные крошки) и что будет дальше (индикаторы с несколькими шагами).


Расширенный поиск на jQuery

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


Расширенный поиск на jQuery

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close