13.08.13, 18:18
0 комментарий
  Уроки

Progression.js: jQuery-плагин принимает на себя удар веб-форм

Сегодня мы хотим представить вам свежий jQuery-плагин из Лидса (Великобритания). Плагин обещает помогать посетителям в заполнении веб-форм, предоставляя им информирование о прогрессе. Такой подход становится тем более полезным, чем длиннее форма, а ведь все мы знаем, что веб-формы могут быть по-настоящему длинными. Два добавленных к форме атрибута данных позволяют отслеживать, где находится пользователь, и что ему нужно будет сделать.

Формы: люблю-ненавижу

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

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

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

Progression.js: jQuery-плагин принимает на себя удар веб-форм


Сегодня многие jQuery-плагины все больше и больше основываются на HTML5-атрибутах данных. Таким образом контент, необходимый для реализации функций, может быть помещен прямо внутрь исходного кода HTML без необходимости отображать его посетителю. Содержимое data-attribute определяется jQuery-плагином.

Progression.js: насколько это возможно – просто!

Интеграция плагина в проект производится очень просто. Все начинается с встраивания jQuery – progression.js – и соответствующего CSS-кода:

<link href='progression.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="progression.js"></script>


Каждая форма, которую вы хотите указать в progression.js, должна быть обозначена уникальным ID:

<form id="myform">
    <p>
        <label for="">Name</label> 
        <input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="" />
    </p>
</form>


Атрибут данных 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, и если вы пропустили публикацию, вы можете воспользоватья этой ссылкой.

СКАЧАТЬ

Забрать
с облака

Напишите своё мнение