Превратите любую веб-форму в яркий пошаговый мастер с помощью jQuery

Этот урок покажет Вам как длинную веб-форму превратить в мастер с ''пошаговым'' введением данных.

Какова наша задача?

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

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

1. Создание ''шагов''

Код должен выглядеть следующим образом:

<form id="SignupForm" action="">
  <fieldset>
  <-- поля -->
  </fieldset>
  <fieldset>

  <-- поля -->
  </fieldset>
  <fieldset>
  <-- поля -->
  </fieldset>
  </form> 

Теперь давайте разберем следующий код. Чтобы установить сколько будет шагов, Вам необходимо выбрать(выделить) все тематические блоки и установить размер создаваемой рамки. Затем, мы интегрируем созданную рамку (возвращаем все блоки) обрамляем каждый тематический блок тегами div и привязываем пункт, который будет содержать кнопки ''back'' и ''next''.

Теперь перейдем к более веселой части. Если это - первый тематический блок, мы создаем только кнопку "next" и делаем этот шаг видимым по умолчанию. Для последнего шага, создадим только кнопку "back". Во всех остальных случаях будут нужны обе кнопки навигации. Метод создания кнопок навигации будет описан позже.

 var steps = $("#SignupForm fieldset");
var count = steps.size();
steps.each(function(i) {
  $(this).wrap("<div id='step" + i + "'></div>");
  $(this).append("<p id='step" + i + "commands'></p>");
 if (i == 0) {

  createNextButton(i);        // to do
  selectStep(i);                  // to do
  }
  else if (i == count - 1) {
  $("#step" + i).hide();
  createPrevButton(i);       // to do
  }
  else {
  $("#step" + i).hide();
  createPrevButton(i);       // to do
  createNextButton(i);       // to do
  }
  }

Перейдем к описанию создания кнопок и процессу навигации.

2. Создаем кнопки Next и Back и добавляем взаимодействие

Создать кнопки навигации не так сложно как кажется. Каждая кнопка вместо стандартной надписи Next может иметь свое уникальное имя (напр. Далее, или Предыдущая) и будет привязана к панелям, созданным на предыдущем этапе. Чтобы можно было переключаться между ''шагами'', необходимо добавить теги ссылок каждой кнопке. Они будут работать следующим образом:

• Нажатая кнопка Back возвращает пользователя с открытой страницы шага на предыдущую, которая будет отмечена как текущая в selectStep() методе.
• Активированная кнопка Next перемещает пользователя с открытой страницы на следующую, которая будет отмечена как текущая в selectStep() методе.

 function createPrevButton(i) {
 var stepName = "step" + i;
 $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");
 $("#" + stepName + "Prev").bind("click", function(e) {
  $("#" + stepName).hide();
  $("#step" + (i - 1)).show();
  selectStep(i - 1);
  });
  }
function createNextButton(i) {
  var stepName = "step" + i;
  $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");
  $("#" + stepName + "Next").bind("click", function(e) {
  $("#" + stepName).hide();

  $("#step" + (i + 1)).show();
  selectStep(i + 1);
  });
  }

Упомянутая мной функция selectStep() снимает CSS класс "current" со всех блоков и приписывает его только текущему:

function selectStep(i) {
  $("#steps li").removeClass("current");
  $("#stepDesc" + i).addClass("current");
  }

Мастер практически готов к использованию, но это еще не все. Теперь давайте добавим описания каждого шага над формой, чтобы пользователь мог легко ориентироваться.

3. Создаем описание шагов

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

 var steps = $("#SignupForm fieldset");
  var count = steps.size();
  
  $("#SaveAccount").hide();
  $("#SignupForm").before("<ul id='steps'></ul>");

Нам также нужно расширить каждую функцию () function и добавить информацию о каждом шаге для всех тегов fieldset созданных рамок (wrapped set). Каждый шаг нумеруется, начиная с 1. Под номером шага добавим описание с помощью элемента <legend>.

 steps.each(function(i) {
  var name = $(this).find("legend").html();
  $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");
  ...
  });

Давайте еще кое-что настроим. Так как кнопка ''Принять'' должна быть видна лишь на последней странице, мы будем скрывать ее, каждый раз когда пользователь нажимает на кнопку Next. И как только пользователь дойдет до последнего шага, она станет видимой.

 $("#" + stepName + "Prev").bind("click", function(e) {
  $("#SaveAccount").hide();
  });
  $("#" + stepName + "Next").bind("click", function(e) {
  if (i + 2 == count)
  $("#SaveAccount").show();
  });

Плагин для простоты использования

Было бы грустно, если бы не было плагина, с помощью которого можно было бы все описанное выше ввести одной строкой. Этот плагин называется FormToWizard. Я думаю, что теперь всем понятно что это:). Чтобы установить плагин, подключаем ссылку на script–файл и ссылаемся на него в элементе <form>.

<script type="text/javascript" src="formToWizard.js"></script>
$("#SignupForm").formToWizard();

Если вы хотите скрыть кнопку ''Принять'' (или заполнитель место для различных кнопок), вы можете добавить параметр sumbitButton, указав название элемента, который нужно сделать невидимым.

  $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) 

Маленький размер (Легковесность) и совместимость с браузерами

Плагин весит только 2,3KB, а в сжатом виде еще меньше. Он поддерживается всеми популярными браузерами: FireFox, Google Chrome, Safari, Opera, Internet Explorer 8, 7 и 6. Последний – второстепенный, сам был крайне удивлен, что плагин работает и в нем :).

Спасибо за внимание. Удачи!