사악미소의 현대마법의 공방 — [jQuery] DAUM - 우편번호 API 서비스 Mobile 화면에서 사용

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/>
        &nbsp;
        <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/>
        &nbsp;
        <input type="text" id="jibunAddress" value="" style="width:300px;" placeholder="지번주소" readOnly/>
        <br/>
        <input type="text" id="address_detail" value="" style="width:400px;" placeholder="상세주소"/>
        &nbsp;
        <input type="text" id="bname" value="" style="width:200px;" placeholder="참고항목"/>
    </body>
</html>

# 출력결과

:: 다음 주소록 API ::

■ Daum 우편번호 API 서비스

이전에 작성했던 DAUM - 우편번호 API 서비스 사용 샘플 에서는 [우편번호 찾기] 버튼을 클릭하면

다음, 카카오에서 제공하는 우편번호 찾기 팝업 창이 오픈되었지만

해당 포스팅에서는 다음, 카카오에서 권장하는 <iframe> 끼워넣기 방법을

jQuery의 SlideToggle( ) 메서드와 조합하여 구현하였다.

'jQuery' 카테고리의 다른 글

[jQuery] DAUM - 우편번호 API 서비스 사용 샘플 (0)	2023.08.12
[jQuery] 테이블 행 Drag & Drop으로 이동시키기 (0)	2023.07.03
[Spring] 소스트리 연동 프로젝트 이클립스에서 import 하는 방법 (0)	2023.04.06

# 소스코드

# 출력결과

■ Daum 우편번호 API 서비스

'jQuery' 카테고리의 다른 글

티스토리툴바