• Главная»
  • Уроки»
  • jQuery»
  • Преобразование длинной формы в пошаговый мастер регистрации

Преобразование длинной формы в пошаговый мастер регистрации

Данный урок демонстрирует преобразование длинной формы в пошаговый мастер регистрации с индикацией информации о количестве оставшихся шагов.

demosourse

Цель урока

Семантически разделяем все поля на большой форме на наборы. Каждый набор полей имеет четкое описание. Рисунок схематически представляет разделение полей по смыслу:

Разметка HTML

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

1. Создаем "шаги"

Код HTML должен иметь вид:

 <form id="SignupForm" action="">
    <fieldset>
        <-- Поля ввода -->
    </fieldset>
    <fieldset>
        <-- Поля ввода -->
    </fieldset>
    <fieldset>
        <-- Поля ввода -->
    </fieldset>
</form>

Разберем код. Для того, чтобы определить количество шагов в мастере регистрации, нам нужно выделить все наборы полей и определить размер формы. Затем, мы будем продвигаться по форме, оборачивать каждый набор полей в div и добавлять абзац, который будет содержать кнопки "Назад" и "Далее".

Если набор полей является первым, то надо добавть только кнопку "Далее". Для последнего набора полей создается только кнопка "Назад". Во всех остальных случаях создаются обе кнопки. Метод создания кнопок объясняется позже.

 
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);                selectStep(i);                      }     else if (i == count - 1) {         $("#step" + i).hide();         createPrevButton(i);           }     else {         $("#step" + i).hide();         createPrevButton(i);               createNextButton(i);       } }

2. Создаем кнопки навигации и добавляем шаги

Создание кнопок достаточно простая функция. Каждая кнопка имеет уникальное имя (например step1next, или step3prev) и добавляется на свою панель, созданную на предыдущем шаге. Для того, чтобы добавить шаги и сделать возможным премещение между ними нужно связать событие нажатия кнопки мыши для каждой кнопки навигации. Вот как это работает:

  • Когда пользователь нажимает кнопку "Назад" текущий шаг скрывается, показывается предыдущий шаг и вызывается метод selectStep() который отмечает его как текущий.
  • Когда пользователь нажимает кнопку "Далее"текущий шаг скрывается, показывается следующий шаг и вызывается метод selectStep() который отмечает его как текущий.
 
function createPrevButton(i) {
    var stepName = "step" + i;
    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Назад</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'>Далее ></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>");

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

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

Так как кнопка отправки информации должна быть видна только на последнем шаге, мы будем делать ее невидимой каждый раз, когда пользователь нажимает "Далее". И только на последнем шаге она станет видимой.

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

 

Сделаем плагин для простого использования

Плагин позволяет делать все, описанное выше, используя только одну строчку в коде. Он называется FormToWizard. Нужно добавить ссылку на файл скрипта и использовать плагин с элементом <form>.

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

Если Вы хотите скрыть кнопку отправки информации нужно добавить параметр submitButton с именем элемента, который нужно скрыть.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.jankoatwarpspeed.com
Перевел: Сергей Фастунов
Урок создан: 29 Июня 2010
Просмотров: 43762
Правила перепечатки


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

^ Наверх ^