Прогресс бар заполнения формы

15 июня 2016 Антон Кулешов 1269 0

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об JavaScript библиотеке под названием fort.

Реклама

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

Теперь давайте рассмотрим один пример и начнем с подключения необходимых файлов:

<link href="css/fort.min.css" type="text/css" rel="stylesheet" />
<script src="js/fort.min.js" type="text/javascript"></script>

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

<div class="form">
	<form action="#">
		<input type="text" />
	</form>
</div>

Воспользуемся одним из методов библиотеки:

Fort.solid("#009dff");

Вот и всё! Выше я написал «одним из методов», а теперь рассмотрим же, какие есть ещё методы у объекта Fort. Как они работают показано на странице демо. Вот список: solid, gradient, sections, flash, merge. Все эти методы на вход принимают только цвета. Есть ещё один - это config:

Fort.config({
	height: "15px",
	duration: "2s",
	alignment: "top"
});

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Гистограммы и не только

8 сентября 2015 Антон Кулешов

Порой на ресурсе приходится отобразить какие-либо статистические данные: будь то сводная диаграмма из нескольких метрик, статистика для геймеров, биржевая сводка и многое другое. Ранее все решалось до боли просто: мы строили нужный график в таблицах excel, а затем, в виде картинки, помещали его у себя на сайте, но что делать, если необходимо подкорректировать данные или они обновляются, скажем, каждые 10 минут? Искать раба? Ну, уж нет, для построения графиков прямо на сайте есть более эффективные методы, и сегодня мы рассмотрим библиотеку morris.

Случайный вывод картинок при помощи PHP

21 декабря 2014 Антон Кулешов

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

Как определить пользователя, зашедшего с телефона

3 октября 2014 Антон Кулешов

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