![[jQuery] DAUM - 우편번호 API 서비스 Mobile 화면에서 사용](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdlvLrL%2Fbtsq2hVxb9D%2Fw60Klbnn58P75jaZpktFuK%2Fimg.jpg)
728x90
Chapter#01 : DAUM - 우편번호 API 서비스 사용 샘플
Chapter#02 : DAUM - 우편번호 API 서비스 Mobile 화면에서 사용
다음, 카카오 우편번호 서비스( http://postcode.map.daum.net/guide ) 사용시
모바일 환경에서 사용하는경우 팝업을 띄우는 것이 문제가 되었다.
다음, 카카오 우편번호 서비스에서는 <iframe>을 이용하여 서비스하는것을 권장하고 있는데.
해당 포스팅에서는 그 내용을 조금 수정하여 아래와 같은 방식으로 사용중에 있다.
# 소스코드
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>:: 다음 주소록 API ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/JavaScript" src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#btnExecPostCode").on("click", function(event) {
openDaumZipAddress();
});
});
function openDaumZipAddress() {
// wrap 레이어가 off된 상태라면 다음 우편번호 레이어를 open 한다.
if(jQuery("#wrap").css("display") == "none") {
new daum.Postcode({
oncomplete:function(data) {
jQuery("#zonecode").val(data.zonecode);
jQuery("#roadAddress").val(data.roadAddress);
jQuery("#jibunAddress").val(data.jibunAddress);
jQuery("#bname").val(data.bname);
jQuery("#address_detail").focus();
console.log(data);
}
// 사용자가 값을 주소를 선택해서 레이어를 닫을 경우
// 다음 주소록 레이어를 완전히 종료 시킨다.
, onclose:function(state) {
if(state === "COMPLETE_CLOSE") {
// 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
offDaumZipAddress(function() {
element_wrap.style.display = "none";
});
}
}
, width:"100%" // 가로사이즈를 wrap 레이어에 맞움
}).embed(document.getElementById("wrap"));
// 슬라이드 다운 기능을 이용해 레이어 창을 오픈한다.
jQuery("#wrap").slideDown();
}
// warp 레이어가 open된 상태라면 다음 우편번호 레이어를 off 상태로 변경한다.
else {
// 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
offDaumZipAddress(function() {
document.getElementById("wrap").style.display = "none";
return false;
});
}
}
function offDaumZipAddress() {
// 슬라이드 업 기능을 이용해 레이어 창을 닫는다.
jQuery("#wrap").slideUp();
}
</script>
</head>
<body>
<h3>■ Daum 우편번호 API 서비스</h3>
<br/>
<input type="text" id="zonecode" value="" style="text-align:center;width:100px;" placeholder="00000" readOnly/>
<button type="button" id="btnExecPostCode">우편번호 찾기</button>
<br/>
<div id="wrap" style="display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px"></div>
<div style="height:10px;"></div>
<input type="text" id="roadAddress" value="" style="width:300px;" placeholder="도로명주소" readOnly/>
<input type="text" id="jibunAddress" value="" style="width:300px;" placeholder="지번주소" readOnly/>
<br/>
<input type="text" id="address_detail" value="" style="width:400px;" placeholder="상세주소"/>
<input type="text" id="bname" value="" style="width:200px;" placeholder="참고항목"/>
</body>
</html>
# 출력결과
■ Daum 우편번호 API 서비스
이전에 작성했던 DAUM - 우편번호 API 서비스 사용 샘플 에서는 [우편번호 찾기] 버튼을 클릭하면
다음, 카카오에서 제공하는 우편번호 찾기 팝업 창이 오픈되었지만
해당 포스팅에서는 다음, 카카오에서 권장하는 <iframe> 끼워넣기 방법을
jQuery의 SlideToggle( ) 메서드와 조합하여 구현하였다.
728x90
'jQuery' 카테고리의 다른 글
| [jQuery] jQuery UI DatePicker 한국어 설정 (0) | 2025.03.31 |
|---|---|
| [jQuery] DAUM - 우편번호 API 서비스 사용 샘플 (0) | 2023.08.12 |
| [jQuery] 테이블 행 Drag & Drop으로 이동시키기 (0) | 2023.07.03 |
| [Spring] 소스트리 연동 프로젝트 이클립스에서 import 하는 방법 (0) | 2023.04.06 |