<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Выдвигающаяся форма поиска по клику

Выдвигающаяся форма поиска по клику

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

Как сделать выдвигающийся поиск по клику.

В обычном состоянии форма поиска свернута до минимального размера и только иконка указывает на то, что это форма поиска. При клике на иконку, поле ввода формы выдвигается.

Как сделать выдвигающийся поиск по клику.

HTML-код

В HTML разметке прописывается контейнер wrap с одним полем ввода input для текста и шрифтовой иконкой, код которой скопирован с Font Awesome. На официальном сайте Font Awesome, вы без труда найдете нужную иконку.

<body>
<div class="wrap">
    <input type="text" class="input" placeholder="Поиск">
    <i class="fas fa-search" aria-hidden="true"></i>
</div>
</body>

Между тегами head подключаем ссылку на файл иконочного шрифта и переходим к написанию стилей, чтобы форма смотрелась более привлекательно.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

CSS-код

За счет нулевой ширины, поле ввода формы скрыто, мы видим только часть контейнера со скругленными углами - border-radius и с тенью box-shadow.

.wrap{
    width: 0px;
    border-radius: 7px;
    box-shadow: 0 0 9px rgba(0,0,0,0.6);
}

В поле ввода input убираем рамки - border и дефолтный белый цвет через прозрачный фон - transparent. В нераскрытом состоянии форма спрятана - width: 0%.

.input{
    border: 0;
    background: transparent;
    width: 0%;
}

Задаем белый цвет - color и размеры иконки - 22 пикселя через свойство font-size.

.wrap .fas{
    color: #fff;
    font-size: 22px;
}

Позиционируем иконку относительно родителя - wrap.

    position: absolute;
    right: 17px;
    top: 15px;

В активном состоянии контейнер раскрывается на ширину в 250 пикселей и благодаря transition делает это плавно.

.wrap.active{
    width: 240px;
    padding-left: 18px;
    transition: all 0.6s ease;
}

Поле ввода в активном состоянии раскрывается на 98% по ширине относительно своего родителя.

.input.active{
    width: 98%;
    padding-left: 6px;
    transition: all 0.4s 0.7s ease;
}

Атрибут placeholder выводит текст белого цвета "Поиск" в текстовом поле формы, который исчезает, как только пользователь вводит свое поисковое слово.

input::placeholder {
    color: #fff;
}

Итак, какой механизм будет выдвигать форму поиска при клике?


Метод toggleClass

Подключаем библиотеку jQuery перед закрывающим тегом body:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Создаем JavaScript файл и так же подключаем внизу HTML-файла:

<script src="lib.js"></script>

Функция будет выполняться, как только DOM загрузится.

$(document).ready(function(){

Область для клика - это иконка с классом fa-search.

$(".fa-search").click(function(){

Метод toggleClass работает как переключатель между классами оформления при клике. Если нет класса "active", то он его добавит и тогда форма поиска выдвинется. Если есть класс "active" - удалит и поисковая форма свернётся обратно.

$(".wrap, .input").toggleClass("active");

Событие focus отслеживает текстовое поле input.

$("input[type='text']").focus();

Посмотреть как выдвигается форма поиска и код целиком.

See the Pen Expanding Search Box On Click by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.