Создание многошаговых форм

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

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

Я могу понять, как переходить от шага к шагу, постепенное появление / исчезновение и т. Д. Но сменить маркер и сказать, какой шаг.

Мысли?


forms jquery multi-step
person Coughlin    schedule 15.01.2010    source источник
comment
Образец URL больше не работает.   -  person Hauke    schedule 15.10.2017

Ответы (3)


arrow_upward
26
arrow_downward

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

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

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

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

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

ИЗМЕНИТЬ:

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

person orandov    schedule 15.01.2010
comment
Выглядит отлично! Я собираюсь попробовать это. - person Coughlin; 16.01.2010
comment
Очень интересно, но я думаю, что это не работает с кнопкой возврата в браузере. - person Pikachu; 23.03.2012
comment
простой плагин jquery, который я написал, я надеюсь, что кто-то найдет его полезным. > - person Hirdesh Vishwdewa; 01.04.2018

arrow_upward
2
arrow_downward

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

Сандро

person Sandro    schedule 15.01.2010
comment
Спасибо! Я попробую это, мне нравится, как это анимирует следующий маркер. - person Coughlin; 16.01.2010
comment
если каждый шаг формы находится в ‹div›, то вы можете дойти до динамического построения индикатора шага, разбивая горизонтальную полосу, каждый пронумерованный круг и (очевидно) маркер на свои собственные изображения, используйте jQuery для узнайте, сколько шагов (‹div›s) находится в форме, и выполните цикл столько раз, чтобы построить индикатор, используя математику, описанную выше. Маркер размещается на текущем шаге. - person Justin Lee; 16.01.2010

arrow_upward
0
arrow_downward

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

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

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>

person João Pimentel Ferreira    schedule 19.02.2017