소개
이 프로젝트에서는 jQuery 를 사용하여 진행률 표시줄이 있는 단계별 양식을 구현하는 방법을 배우게 됩니다. 이 프로젝트는 사용자가 다양한 단계를 쉽게 탐색할 수 있는 동적이고 상호 작용적인 양식을 만드는 과정을 이해하는 데 도움이 되도록 설계되었습니다.
👀 미리보기
🎯 과제
이 프로젝트에서는 다음을 배우게 됩니다.
- "다음 페이지 (Next Page)" 버튼의 기능을 구현하여 양식의 다음 단계로 전환하는 방법.
- "이전 (Previous)" 버튼의 기능을 구현하여 양식의 이전 단계로 전환하는 방법.
- "제출 (Submit)" 버튼의 기능을 구현하여 성공 메시지를 표시하는 방법.
- 진행률 표시줄을 업데이트하여 양식의 현재 단계를 반영하는 방법.
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- jQuery 를 사용하여 DOM 을 조작하고 사용자 상호 작용을 처리합니다.
display속성을 사용하여 양식 필드의 표시를 제어합니다.- 진행률 표시줄을 업데이트하여 양식의 현재 단계를 반영합니다.
- 깨끗하고 직관적인 사용자 인터페이스를 갖춘 단계별 양식을 만듭니다.
프로젝트 구조 설정
이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.
프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.
├── css
│ └── style.css
├── js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html
그 중:
css/style.css는 스타일 파일입니다.js/index.js는 단계별 양식 전환을 구현하기 위한 JavaScript 파일입니다.js/jquery-3.6.0.min.js는 jQuery 파일입니다.index.html은 메인 페이지입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.
다음 페이지 버튼 구현
이 단계에서는 양식의 첫 번째 단계에서 "다음 (next)" 버튼의 기능을 구현하는 방법을 배웁니다.
js/index.js파일을 엽니다.$(".next").click코드를 찾고 다음 코드를 추가합니다.
// Click the button on the next page
$(".next").click(function () {
current_form = $(this).parent();
next_form = current_form.next();
// Control the next form to be shown and other forms to be hidden
next_form.show().siblings("fieldset").hide();
const index = next_form.index() - 1;
$("#progressbar li").eq(index).addClass("active");
});
- 이 코드는 "다음 페이지 (Next Page)" 버튼의 클릭 이벤트를 처리하는 역할을 합니다. 이 코드가 수행하는 작업을 자세히 살펴보겠습니다.
$(".next").click(function () { ... }): "next" 클래스를 가진 모든 요소에 대한 클릭 이벤트 핸들러를 설정합니다.current_form = $(this).parent();: 현재 양식 필드 (클릭된 "다음 페이지 (Next Page)" 버튼을 포함하는 필드) 를 가져옵니다.next_form = current_form.next();: 다음 양식 필드 ( "다음 페이지 (Next Page)" 버튼을 클릭한 후 표시되어야 하는 필드) 를 가져옵니다.next_form.show().siblings("fieldset").hide();: 다음 양식 필드를 표시하고 다른 모든 양식 필드 (다음 양식 필드의 형제) 를 숨깁니다.const index = next_form.index() - 1;: 진행률 표시줄을 업데이트하는 데 사용될 다음 양식 필드의 인덱스를 계산합니다.$("#progressbar li").eq(index).addClass("active");: 해당 진행률 표시줄 항목에 "active" 클래스를 추가하여 사용자가 다음 단계로 이동했음을 나타냅니다.
이전 버튼 구현
이 단계에서는 양식의 두 번째 단계에서 "이전 (previous)" 버튼의 기능을 구현하는 방법을 배웁니다.
js/index.js파일에서$(".previous").click코드를 찾고 다음 코드를 추가합니다.
// Click the back button
$(".previous").click(function () {
current_form = $(this).parent();
previous_form = current_form.prev();
previous_form.show().siblings("fieldset").hide();
const index = previous_form.index() - 1;
$("#progressbar li")
.eq(index)
.addClass("active")
.next()
.removeClass("active");
});
- 이 코드는 "이전 (Previous)" 버튼의 클릭 이벤트를 처리하는 역할을 합니다. 이 코드가 수행하는 작업을 자세히 살펴보겠습니다.
$(".previous").click(function () { ... }): "previous" 클래스를 가진 모든 요소에 대한 클릭 이벤트 핸들러를 설정합니다.current_form = $(this).parent();: 현재 양식 필드 (클릭된 "이전 (Previous)" 버튼을 포함하는 필드) 를 가져옵니다.previous_form = current_form.prev();: 이전 양식 필드 ( "이전 (Previous)" 버튼을 클릭한 후 표시되어야 하는 필드) 를 가져옵니다.previous_form.show().siblings("fieldset").hide();: 이전 양식 필드를 표시하고 다른 모든 양식 필드 (이전 양식 필드의 형제) 를 숨깁니다.const index = previous_form.index() - 1;: 진행률 표시줄을 업데이트하는 데 사용될 이전 양식 필드의 인덱스를 계산합니다.$("#progressbar li").eq(index).addClass("active").next().removeClass("active");: 해당 진행률 표시줄 항목에 "active" 클래스를 추가하여 사용자가 이전 단계로 이동했음을 나타내고, 다음 진행률 표시줄 항목에서 "active" 클래스를 제거합니다.
제출 버튼 구현
이 단계에서는 양식의 세 번째 단계에서 "제출 (submit)" 버튼의 기능을 구현하는 방법을 배웁니다.
js/index.js파일에서$(".submit").click코드를 찾고 다음 코드를 추가합니다.
// Click the submit button
$(".submit").click(function () {
alert("Submitted successfully!");
});
- 이 코드는 "제출 (Submit)" 버튼의 클릭 이벤트를 처리하는 역할을 합니다. 이 코드가 수행하는 작업을 자세히 살펴보겠습니다.
$(".submit").click(function () { ... }): "submit" 클래스를 가진 모든 요소에 대한 클릭 이벤트 핸들러를 설정합니다.alert("Submitted successfully!");: 양식이 성공적으로 제출되었음을 나타내는 알림 메시지를 사용자에게 표시합니다.
이 네 단계를 완료하면 단계별 양식 기능이 완전히 구현됩니다. "다음 (next)", "이전 (previous)", "제출 (submit)" 버튼을 클릭하여 양식 전환 및 진행률 표시줄 업데이트가 예상대로 작동하는지 테스트할 수 있습니다. 최종 페이지 효과는 다음과 같습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩 (lab) 을 연습하여 기술을 향상시킬 수 있습니다.
