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

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

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

demosourse

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

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

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

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. Последний – второстепенный, сам был крайне удивлен, что плагин работает и в нем :).

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.jankoatwarpspeed.com
Перевел: Максим Шкурупий
Урок создан: 12 Октября 2009
Просмотров: 72219
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 13 Октября 2009 01:48
    AronTito
    Прикольно и полезно
  • 13 Октября 2009 12:00
    chuikoff
    Большое спасибо! Давно искал решение для устновщика, и вот оно)
  • 13 Октября 2009 12:00
    pyos
    форма класс, очень понравилась. Есть такой вопрос как место стандартной sabmit поставить своё изображение
  • 13 Октября 2009 15:22
    tulnikov
    Урок, классный!!! В тексте: "Затем, мы итегрируем созданную рамку...", пропущена буква "Н"
  • 13 Октября 2009 17:44
    МаксимШкурупий
    Спасибо, исправим
  • 13 Октября 2009 18:45
    delphi
    Хо Хо - супер ! ТОлько вот еще бы кликнул на Step 1 и сразу переместился в 1 шаг, несмотря на то что находишся в третьем
  • 15 Октября 2009 08:06
    veins
    Доброе утро ! Проверил в ie-6 - не работает корректно. Не изменяет форму при нажатии на "Нажмите здесь, чтобы изменить форму", ie-6 выдает ошибку error on the page 84, unspecified error. Проверил а ie-7 - е не работате корректно. Так же не изменяет форму, но название ошибки отличается :"Line 28, объект не поддерживает это свойство или метод". В ie-8 форма изменилась.
  • 15 Октября 2009 19:59
    Колян
    2veins Подтверждаю. Скачал тут же прогу "Весь ИЕ в одном".
  • 20 Октября 2009 16:50
    Action
    Спасибо. Отличная штука. Подскажите пожалуйста, как сделать так, чтобы пошаговая форма загружалась сразу, без нажатия на кнопку изменения формы? Заранее спасибо.
  • 23 Октября 2009 00:15
    Alexander
    немного не понятно, где в коде встречается var steps = $("#SignupForm fieldset"); просто надо изменить SignupForm на другое название, а в коде не нахожу где. при смене на HTML странице соответственно отрубается скрипт.
  • 23 Октября 2009 01:22
    Alexander
    Вопрос отпадает, # забыл поставить, спасибо за качественный перевод статьи
  • 23 Октября 2009 17:57
    Jotunn
    Простите за глупый вопрос, но о чм урок? :)) Что такое веб-форма, это обыкновенная форма для заполнения данных или что-то иное?
  • 23 Октября 2009 17:58
    Jotunn
    Простите за глупый вопрос, но о чём урок? :)) Это обыкновенная форма для заполнения данных или что-то другое?
  • 28 Октября 2009 19:50
    Yomin
    Jotunn, смотрите пример
  • 3 Января 2010 03:44
    exete
    Как сделать чтобы скрипт начал сразу работать, без нажатии на кнопку?
  • 14 Января 2010 12:50
    upgreyt
    Вопрос такого плана : как осуществить множественный выбор в этой форме ? т.е. например : в первом шаге предусматриваем выбор, в зависимости от выбора откроется шаг 2 или, например, сразу 3.. Спасибо.
  • 28 Февраля 2010 15:20
    allseo
    Как сделать чтобы скрипт начинал работать сразу? : Заменяем: <script type="text/javascript"> function MakeWizard() { $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) $("#makeWizard").hide(); $("#info").fadeIn(400); } </script> На: <script type="text/javascript"> $(document).ready(function(){ $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) $("#info").fadeIn(400); }); </script>
    • 7 Февраля 2011 11:51
      Smartem
      не работает
      • 15 Февраля 2011 13:39
        Bitihint
        работает, просто знаки препинания неверно проставлены
        	<script type="text/javascript">	$(document).ready(function() {	$("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) ;	$("#info").fadeIn(400);	})	</script>
  • 14 Июля 2010 15:59
    legokoh
    В ІЕ не работает. Жаль.
  • 6 Ноября 2011 21:33
    Sergey0002
    Господа а как сделать чтобы при клике на названии шага осуществялся переход на него??? заранее благодарю.
  • 6 Ноября 2011 22:16
    Sergey0002
    steps.each(function(i)
    {
    ...
    // 2
    var name = $(this).find("legend").html();
    x = $("#steps").append("<li style='cursor:pointer;' id='stepDesc" + i + "'>Шаг " + (i + 1) + "<span>" + name + "</span></li>");
    // ПЕРЕХОД ПО КЛИКУ НА ШАГ
    $("#stepDesc" + i).bind("click", function(e)
    {
    // скрываем все кроме того на который переходим) steps.each(function(m) { $("#" + "step" + m ).hide(); }); $("#step" + (i)).show(); $(submmitButtonName).hide(); selectStep(i);
    })
    .....
    
    Благодарю себя запомощь....
    • 17 Февраля 2012 03:34
      karmanovo
      А можно полный код такого решения. У меня не получается
  • 7 Июня 2013 03:33
    google78
    Уважаемые знатоки! Подскажите как заблокировать кнопку далее до момента полного заполнения Шага? Заранее благодарю
  • 29 Сентября 2013 11:58
    nipopadyuk
    Прошу прощения за глупый вопрос. Нужно чтоб в первом шаге заказчик ввел кол-во отдыхающих которые придут с ним, а на второй, вывел поля для регистрации, ФИО паспортные данные и т.д. для каждого отдыхающего, их может быть до 10
  • 28 Апреля 2016 16:12
    oldor
    А как сделать, чтобы кнопка далее была неактивна если не заполнены обязательные поля?
^ Наверх ^