<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입(jQuery) 바형태의 최종디자인</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css"
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
/*
진행바 디자인
*/
.progressbar {
width: 100%;
height: 5px;
}
.progressbar>.guage {
width: 0%;
height: 100%;
background: rgb(131, 58, 180);
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
/* 스르륵 */
transition: width 0.1s ease-out;
}
</style>
<!-- jquery cdn -->
<script src="multipage.js"></script>
<script src="join.js"></script>
<!-- daum 우편 API cdn-->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<!-- javascript 작성 공간 -->
<script>
$(function () {
//최초 게이지 계산
refreshProgressbar();
//이전이나 다음버튼을 누르면 진행상황을 파악하여 게이지 계산
$(".btn-prev, .btn-next").click(function () {
refreshProgressbar();
});
function refreshProgressbar() {
//page중에 보여지는 태그를 찾아서 계산
//- 전체 페이지 수 + 보여지는 페이지 번호
var count = 0;
var index = 0;
$(".page").each(function (idx, el) {
//if(현재 태그가 표시중이라면) {
if ($(this).is(":visible")) {
index = idx + 1;
}
count++;
});
var percent = index * 100 / count;
$(".progressbar > .guage").css("width", percent + "%");
}
});
$(function () {
//우편번호 검색버튼, 우편번호 입력창, 기본주소 입력창을 클릭하면 검색 실행
$(".post-search").click(function () {
new daum.Postcode({
oncomplete: function (data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
//document.querySelector("[name=memberPost]").value = data.zonecode; //자바스크립트 방식
$("[name=memberPost]").val(data.zonecode); //jQury 방식
//document.querySelector("[name=memberAddr1]").value = addr; //자바스크립트 방식
$("[name=memberAddr1]").val(addr); //jQury 방식
// 커서를 상세주소 필드로 이동한다.
// document.querySelector("[name=memberAddr2]").focus(); //자바스크립트 방식
$("[name=memberAddr2]").focus(); //jQury 방식
}
}).open();
});
});
</script>
</head>
<body>
<div class="container w-600">
<div class="row">
<h1>회원 정보 입력</h1>
</div>
<!-- 전체 진행단계를 알 수 있는 게이지 출력 -->
<div class="row">
<div class="progressbar">
<div class="guage"></div>
</div>
</div>
<!-- 1단계 : 아이디+비밀번호+확인 -->
<div class="row page">
<div class="row">
<h2>1단계 : 아이디/비밀번호</h2>
</div>
<div class="row left">
<label>아이디 <i class="fa-solid fa-asterisk red"></i></label>
<input type="text" name="memberId" placeholder="영문 소문자, 숫자 5~20자" class="form-input w-100">
<div class="success-feedback">멋진 아이디입니다!</div>
<div class="fail-feedback">아이디를 형식에 맞게 입력하세요</div>
<div class="fail2-feedback">이미 사용중인 아이디입니다</div>
</div>
<div class="row left">
<label>비밀번호 <i class="fa-solid fa-asterisk red"></i></label>
<input type="password" name="memberPw" placeholder="영문,숫자,특수문자 반드시 1개 이상 포함"
class="form-input w-100">
<div class="success-feedback">올바른 비밀번호 형식입니다</div>
<div class="fail-feedback">잘못된 비밀번호 형식입니다</div>
</div>
<div class="row left">
<label>비밀번호 확인 <i class="fa-solid fa-asterisk red"></i></label>
<input type="password" id="password-check" placeholder="비밀번호 한 번 더 입력" class="form-input w-100">
<div class="success-feedback">비밀번호가 일치합니다</div>
<div class="fail-feedback">비밀번호가 일치하지 않습니다</div>
<div class="fail2-feedback">비밀번호를 먼저 작성하세요</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 2단계 : 닉네임 -->
<div class="row page">
<div class="row">
<h2>2단계 : 닉네임</h2>
</div>
<div class="row left">
<label>닉네임</label>
<input type="text" name="memberNickname" placeholder="한글 또는 숫자 2~10자" class="form-input w-100">
<div class="success-feedback">멋진 닉네임입니다!</div>
<div class="fail-feedback">닉네임 형식이 올바르지 않습니다</div>
<div class="fail2-feedback">닉네임이 이미 사용중입니다</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 3단계 : 이메일+연락처 -->
<div class="row page">
<div class="row">
<h2>3단계 : 연락 가능한 정보</h2>
</div>
<div class="row left">
<label>이메일</label>
<input type="text" name="memberEmail" placeholder="test@kh.com" class="form-input w-100">
<div class="fail-feedback">이메일 형식이 잘못되었습니다</div>
</div>
<div class="row left">
<label>연락처</label>
<input type="tel" name="memberContact" placeholder="010XXXXXXXX (- 없이)" class="form-input w-100">
<div class="fail-feedback">전화번호 형식이 올바르지 않습니다</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 4단계 : 생년월일-->
<div class="row page">
<div class="row">
<h2>4단계 : 생년월일</h2>
</div>
<div class="row left">
<label>생년월일</label>
<input type="date" name="memberBirth" class="form-input w-100">
<div class="fail-feedback">잘못된 날짜를 선택하셨습니다</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 5단계 : 주소 -->
<div class="row page">
<div class="row">
<h2>5단계 : 주소</h2>
</div>
<div class="row left">
<label style="display: block;">주소</label>
<input type="text" name="memberPost" placeholder="우편번호" readonly class="form-input post-search"
size="6" maxlength="6">
<button type="button" class="btn post-search">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
<input type="text" name="memberAddr1" placeholder="기본주소" readonly
class="form-input w-100 mt-10 post-search">
<input type="text" name="memberAddr2" placeholder="상세주소" class="form-input w-100 mt-10">
<div class="fail-feedback">모든 주소를 작성해주세요</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
<button type="submit" class="btn btn-positive">가입하기</button>
</div>
</div>
</div>
</form>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 비동기통신(ajax) 아이디 체크 (0) | 2023.11.01 |
|---|---|
| 비동기통신(ajax) (0) | 2023.10.31 |
| 카카오 지도 API (0) | 2023.10.27 |
| 회원가입(JQuery) 고급화 (0) | 2023.10.26 |
| 멀티 페이지(JQuery) (1) | 2023.10.25 |