Создание многоступенчатых форм

Я искал способ создания многоступенчатой формы, например: http://planner.builtbybuffalo.com/step-1/

Я не мог найти какие-либо ресурсы, просто другие примеры, которые я пытаюсь создать, будет состоять из 3-х частей. Я собираюсь построить это в jQuery.

Я могу понять, как идти от шага к шагу, fadein/out и т.д. Но с изменением маркера и указанием какого шага.

Мысли?

Ответ 1

Попробуйте сообщение в блоге из Janko

"Поверните любую веб-форму в мощный мастер с помощью jQuery (плагин FormToWizard)"

Вот его демонстрация.

Я не использовал этот плагин у него, но я знаю, что у него очень хорошие должности, которые я использовал в прошлом.

Надеюсь, это поможет.

EDIT:

Недавно я использовал этот плагин, и он отлично работал. Он был прост в использовании и легко модифицирован для моих конкретных потребностей.

Ответ 2

Похоже, шаги на временной шкале равномерно распределены. Это может быть так же просто, как умножить число шагов на ширину и разделить на количество шагов, чтобы получить расстояние, которое должен пройти маркер. Затем используйте jQuery.animate для анимации положения маркера.

Сандро

Ответ 3

Здесь у вас есть полный рабочий простой пример из трех шагов, без необходимости jQuery.

Вам просто нужно определить функцию submit_form(). HTML-символы « и » просто печатаются соответственно & laquo; и & raquo; которые могут быть интересны для предыдущих и следующих символов кнопки.

function shows_form_part(n){
    var i = 1, p = document.getElementById("form_part"+1);
    while (p !== null){
        if (i === n){
            p.style.display = "";
        }
        else{
            p.style.display = "none";
        }
        i++;
        p = document.getElementById("form_part"+i);
    }
}

function submit_form() {
	var sum = parseInt(document.getElementById("num1").value) +
            parseInt(document.getElementById("num2").value) +
            parseInt(document.getElementById("num3").value);
  alert("Your result is: " + sum);
}

<body onload="shows_form_part(1)">
<form>
  <div id="form_part1">
    Part 1<br>
    <input type="number" value="1" id="num1"><br>
    <!--form elements 1-->
    <button type="button" onclick="shows_form_part(2)">&raquo;</button>
  </div>
  <div id="form_part2">
    Part 2<br>
    <input type="number" value="2" id="num2"><br>
    <!--form elements 2-->
    <button type="button" onclick="shows_form_part(1)">&laquo;</button>
    <button type="button" onclick="shows_form_part(3)">&raquo;</button>
  </div>
  <div id="form_part3">
    Part 3<br>
    <!--form elements 3-->
    <input type="number" value="3" id="num3"><br>
    <button type="button" onclick="shows_form_part(2)">&laquo;</button>
    <button type="button" onclick="submit_form()">Sum</button>
  </div>
</form>
</body>