[API] 다음 - 우편번호 API 모바일에서 사용하기[API] 다음 - 우편번호 API 모바일에서 사용하기
Posted at 2018. 4. 4. 20:11 | Posted in API/우편번호
■ 다음 우편번호 - 팝업창 띄우지 않고 사용하기
-. 이전 포스팅에서 팝업창을 띄워서 사용하는 방법에 대한 포스팅을 작성하였는데. 이 방법만으로는 사용에 한계가 있었다.
① 모바일 환경에서의 사용을 고려한 반응형 웹에서 사용가능하도록 UI 변경
② 팝업창 사용을 막아둔 브라우저 환경 대응
-. postcode.v2.js 가 나오면서 좀더 다양하고 많은 기능을 사용할 수 있게 되었다.
-. 다음 우편번호 서비스의 "iframe을 이용하여 페이지에 끼워 넣기"를 바탕으로 작성하였다.
# 소스코드
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>:: 다음 주소록 API ::</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script type="text/JavaScript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script> <script type="text/javascript"> function openDaumZipAddress() { // 우편번호 찾기 화면을 넣을 element를 지정 var element_wrap = document.getElementById("wrap"); // wrap 레이어가 off된 상태라면 다음 우편번호 레이어를 open 한다. if(jQuery("#wrap").css("display") == "none") { new daum.Postcode({ oncomplete:function(data) { jQuery("#zonecode").val(data.zonecode); jQuery("#address").val(data.address); 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(element_wrap); // 슬라이드 다운 기능을 이용해 레이어 창을 오픈한다. jQuery("#wrap").slideDown(); } // warp 레이어가 open된 상태라면 다음 우편번호 레이어를 off 상태로 변경한다. else { // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다. offDaumZipAddress(function() { element_wrap.style.display = "none"; return false; }); } } function offDaumZipAddress() { // 슬라이드 업 기능을 이용해 레이어 창을 닫는다. jQuery("#wrap").slideUp(); } </script> </head> <body> <input id="zonecode" type="text" value="" style="width:50px;" readOnly/> <input type="button" onClick="openDaumZipAddress();" value = "주소 찾기"/> <!-- 다음 우편번호 찾기 리스트를 띄울 영역을 지정 --> <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="address" value="" style="width:240px;" readOnly/> <input type="text" id="address_detail" value="" style="width:200px;"/> </body> </html> |
※ 계속 값을 체크해 강제로 display:none 처리한 이유
기본적으로 위에서 설명한 다음 우편번호 서비스의
"iframe을 이용하여 페이지에 끼워 넣기"를 필자의 입맛에 맞게 수정한 내용이다.
이렇게 한 이유는 좀 자연스러운 애니메이션(슬라이드) 효과를 사용하고 싶어서 였다.
그래서 위 코드에서는 if(jQuery("#wrap").css("display") == "none") 으로 한번
onclose:function(state) 기능으로 또 한번
다음 주소록 레이어를 강제로 종료시키고 있는데.
이렇게 한 이유는 아래와 같다.
처음 제작 했을때는 slideUp과 slideDown 기능이 아니라 slideToggle만을 사용하여 편하게
display 설정 만을 변경해가며 사용했었다.
그런데 다음 주소록 레이어가 제대로 종료가 되지 않아서 발생을 하는지.
실제 사용중 종종 <div id="wrap"></div>를 지정한 영역에
# slideToggle 기능만을 사용한 결과물
위와 같이 실선이 생기는경우가 발견되었다.
그래서 위와같이 callback과 slideDown기능을 사용하여 레이어를 한번 닫고.
작업이 완료된 이후 한번더 다음 주소록 레이어를 완전히 숨기는 방식으로 변경하였다.
# 출력결과 - Computer Web
# 출력결과 - Mobile Web
위와같이 모바일에서의 사용에 문제가 없게끔 변경해 보았다.
'API > 우편번호' 카테고리의 다른 글
| [API] 주소 검색 - 행정안전부 API 사용하기 (0) | 2019.11.20 |
|---|---|
| [API] 다음 - 우편번호 API 사용하기 (0) | 2018.03.13 |
