Показать Меню
falbar Прогресс бар заполнения формы

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

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

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об 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). В заключение к этой статье, я хочу сказать, что при добавлении стилей прогресс бар можно поместить непосредственно над формой или под ней и это будет выглядеть, в некоторых случаях, ещё более интересно.

Источник
github.com

Подписаться на обновления

варт
варт 2 сентября 2016 в 10:54
现在 это очень круто
Ответить