Сегодня мы хотим представить вам свежий jQuery-плагин из Лидса (Великобритания). Плагин обещает помогать посетителям в заполнении веб-форм, предоставляя им информирование о прогрессе. Такой подход становится тем более полезным, чем длиннее форма, а ведь все мы знаем, что веб-формы могут быть по-настоящему длинными. Два добавленных к форме атрибута данных позволяют отслеживать, где находится пользователь, и что ему нужно будет сделать.
Формы: люблю-ненавижу
Формы, — кто из нас с ними не сталкивался? И в цифровом, и в реальном мире нам вряд ли удастся избежать этих бюрократических отголосков прошлого века. Вот если бы все формы в интернете ограничивались простой регистрацией.Так же, и особенно, в веб-дизайне, когда речь заходит о взаимодействии с пользователями, мы всегда видим формы. К счастью, сегодня у нас есть возможности немного приукрасить этих монстров. Вспоминая 90-е годы, становится как-то не по себе.Aaron Lumsden из Великобритании предлагает нам очень простой метод облегчить процесс заполнения форм. Все начинается с отображения полезных наводящих подсказок, которые помогают заполнять форму правильно. Вдобавок, плагин умеет отображать строку прогресса рядом с каждым полем, что позволяет вам оповещать пользователей о том, сколько им еще осталось до конца формы – в длинных формах это просто незаменимый элемент интерфейса. К тому же, следует отметить, что строку прогресса можно использовать не всегда, а лишь в случае необходимости. 
Сегодня многие jQuery-плагины все больше и больше основываются на HTML5-атрибутах данных. Таким образом контент, необходимый для реализации функций, может быть помещен прямо внутрь исходного кода HTML без необходимости отображать его посетителю. Содержимое data-attribute определяется jQuery-плагином.
Progression.js: насколько это возможно – просто!
Интеграция плагина в проект производится очень просто. Все начинается с встраивания jQuery – progression.js – и соответствующего CSS-кода:
Каждая форма, которую вы хотите указать в progression.js, должна быть обозначена уникальным ID:
Name
Атрибут данных data-progression отвечает за отображение строки прогресса. Атрибут данных data-helper содержит в себе контент подсказки. Довольно неплохо. В конце концов, мы запускаем плагин на форме при помощи заданного ID:
$(document).ready(function ($) {
$("#myform").progression();
});Теперь наш progression.js работает со значениями по умолчанию. Если вам нужно больше контроля над представлением формы, то здесь присутствуют различные параметры, которые позволяют вам разобраться с этой задачей. В «худшем» случае, запуск нашей функции может выглядеть следующим образом:
$("#myform").progression({
tooltipWidth: '200',
tooltipPosition: 'right',
tooltipOffset: '50',
showProgressBar: true,
showHelper: true,
tooltipFontSize: '14',
tooltipFontColor: 'fff',
progressBarBackground: 'fff',
progressBarColor: '6EA5E1',
tooltipBackgroundColor: 'a2cbfa',
tooltipPadding: '10',
tooltipAnimate: true
});
Мы не будем рассказывать вам про каждый параметр, так как они обозначены ярлыками, по которым и так все ясно. Опции настройки внешнего вида позволяют адаптировать внешний вид практически под любой дизайн.Progression.js всего пару недель от роду, и вы можете скачать плагин бесплатно на GitHub. Лицензирования здесь не предусмотрено, но Aaron заверил нас в том, что вы можете использовать плагин как для личных, так и для коммерческих проектов.Progression.js чем-то напоминает Intro.js. Intro.js можно назвать более способным плагином, так как он не ограничен использованием с одними лишь формами. С помощью Intro.js, вы можете направлять ваших пользователей по всему сайту, указывая им направление к областям сайта, которые им обязательно следует заметить. Ранее мы уже рассказывали о Intro.js, и если вы пропустили публикацию, вы можете воспользоватья этой ссылкой.