Разделение формы регистрации на шаги с помощью jQuery

Question

эта штука сводит меня с ума.Я работаю над личным проектом «для собственного удовольствия», включающим довольно длинную регистрационную форму.

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

Я стремился к чему-то похожему на слайд-шоу на форуме http://forum.xtreamer.net/, с индикатором в нижней части и нажимаемыми шагами.Я хотел бы сделать что-то подобное, но для шагов в форме.

Есть идеи, с чего мне начать?Я попытался взглянуть на их код, чтобы увидеть, используют ли они общедоступный или коммерческий (но сторонний) плагин jquery, но без кубиков.

Кто-нибудь может порекомендовать учебник или некоторые ресурсы?

Answer 1

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

Что мы сделали, так это создали длинную горизонтальную страницу с несколькими элементами div, плавающими слева. Каждый div содержал шаг или два, и имел кнопки вперед и назад внизу. Когда вы нажимаете следующую кнопку на определенном шаге, он быстро сдвигается, а затем следующий скользит в

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

Вот пример отдельной навигации для перехода вперед и назад:

<div class="nav">
    <a name="1" onclick="$(document).scrollTo('#1',3000);" style="float:left;">&larr; Back</a>
    <a name="3" onclick="$(document).scrollTo('#3',3000);" style="float:right;">Next &rarr;</a>
</div>

#1 и #3 - это идентификаторы prev, следующие шаги - этот код берется из шага 2. 3000 - это миллисекунды для прокрутки до каждой конкретной части формы. 3 секунды это немного дольше, но у нас было несколько анимированных изображений между шагами, чтобы сделать форму немного веселее!

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

Answer 2

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

Попробуйте использовать jquery show () hide ()

Будет три деления.

при нажатии вы показываете один div, скрываете два других div.

должна быть проверка в каждом делении, и при заполнении одной детали должен быть какой-то скрытый флаг, чтобы проверить, что детали завершены.

В окончательных деталях перед отправкой вы должны проверить флаги для каждого деления.

Поскольку вы пытаетесь дать возможность вернуться к первому div, пользователь может очистить детали first и перейти к final. Таким образом, эта проверка флага должна

Должно работать !!!