가입 양식을 jQuery로 나누어

Question

이 것은 나를 괴롭힌다. 저는 아주 오랜 가입 양식을 포함하는 개인적인 "재미있는"프로젝트에 참여하고 있습니다.

각 단계와 관련된 필드를 그룹화 한 섹션으로 폼을 분할하고 제출을 누르기 전에 앞뒤로 이동하는 기능, 체크 표시 또는 단계가 완료되었는지 또는 아니. 주위에 몇 가지 예제를 발견했지만 그들은 실제로 내 디자인에 맞지 않으며, 내가 원하는대로 정확히 수정할 수 없습니다.

포럼 하단의 진행률 표시 줄과 클릭 가능한 단계로 포럼의 슬라이드 쇼와 비슷한 것을 목표로했습니다. 나는 그와 비슷한 것을하고 싶습니다. 그러나 한 가지 형태의 단계들에 대해서요.

어디에서 시작해야합니까? 필자는 자신의 코드를 공개 또는 상용 (제 3 자) jquery 플러그인을 사용하지만 주사위를 사용하지 않는지 알아보기 위해 노력했습니다.

누구나 자습서 나 리소스를 추천 할 수 있습니까?

감사합니다.

Answer 1

방금 ​​jCarousel을 사용하여 비슷한 비슷한 디자인을했습니다. 그것은 jQuery 플러그인으로 페이지의 특정 위치 또는 ID로 쉽게 스크롤 할 수 있습니다.

우리가 한 것은 몇 개의 div가 왼쪽으로 떠있는 긴 가로 페이지를 만드는 것입니다. 각 div에는 1 ~ 2 단계가 포함되어 있으며 하단에는 앞으로 및 뒤로 버튼이 있습니다. 특정 단계에서 다음 버튼을 클릭하면 빠르게 이동하여 다음 슬라이드가 미끄러 져 들어가게됩니다.

이 외에도 각 단계마다 개별적으로 이동할 수있는 버튼이 절대적으로 배치되었습니다. -이 코드는 단계 (2)로부터 취해지고 (3000)가있다

<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는 이전의 ID에서 다음 단계이다 : 여기

앞뒤로 이동 개인 네비게이션의 예 폼의 각 특정 부분으로 스크롤하려면 밀리 초. 3 초는 약간 길지만, 우리는 조금 더 재미있는 모양을 만들기위한 단계들 사이에 몇 가지 애니메이션 이미지를 가지고 있습니다!

희망이 도움이 :)

Answer 2

사용자가 개인 정보를 완성하고 클릭하면 사무실 세부 정보로 이동 한 다음 세부 정보를 클릭하고 마지막으로 제출하는 양식을 개발하려고 생각합니다.

는

세 된 div있을 것 JQuery와 쇼() 숨기기()를 사용해보십시오.

클릭하면 하나의 div가 표시되고 다른 두 div는 숨겨집니다.

각 div에는 유효성이 있어야하며 하나의 세부 정보를 완료하면 세부 정보가 완료되었는지 확인하는 숨겨진 플래그가 있어야합니다.

제출하기 전에 마지막 세부 정보에서 각 div의 플래그를 확인해야합니다.

첫 번째 div로 돌아가는 옵션을 제공하려는 경우 사용자는 먼저 세부 사항을 비워서 마지막으로 갈 수 있습니다. 따라서이 깃발 수표는해야합니다

일해야합니다!