Создание многошаговых форм - PullRequest
Новая
       17

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

11 голосов
/ 15 января 2010

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

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

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

Мысли

Ответы [ 3 ]

26 голосов
/ 16 января 2010

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

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

Вот его демо .

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

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

EDIT:

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

2 голосов
/ 16 января 2010

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

Сандро

0 голосов
/ 19 февраля 2017

Здесь у вас есть полный рабочий простой пример с тремя шагами, без необходимости 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...