Автор

Расширенный поиск на 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

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


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

Полноразмерный, адаптивный и простой в настройке слайдер.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close