jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼)

by 조쉬 posted Jan 16, 2019
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

<!DOCTYPE html>
<html dir="ltr" lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>우편번호 검색</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="//cdn.poesis.kr/post/search.min.js" charset="UTF-8"></script>
    <!--[if IE 6]><script type="text/javascript" src="http://cdn.poesis.kr/post/search.min.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="//cdn.poesis.kr/post/search.css" media="all" />
</head>
<body>
 
<!--
 *  Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제)
 * 
 *  Copyright (c) 2014-2015, Poesis <root@poesis.kr>
 * 
 *  이 프로그램은 자유 소프트웨어입니다. 이 소프트웨어의 피양도자는 자유
 *  소프트웨어 재단이 공표한 GNU 약소 일반 공중 사용 허가서 (GNU LGPL) 제3판
 *  또는 그 이후의 판을 임의로 선택하여, 그 규정에 따라 이 프로그램을
 *  개작하거나 재배포할 수 있습니다.
 * 
 *  이 프로그램은 유용하게 사용될 수 있으리라는 희망에서 배포되고 있지만,
 *  특정한 목적에 맞는 적합성 여부나 판매용으로 사용할 수 있으리라는 묵시적인
 *  보증을 포함한 어떠한 형태의 보증도 제공하지 않습니다. 보다 자세한 사항에
 *  대해서는 GNU 약소 일반 공중 사용 허가서를 참고하시기 바랍니다.
 * 
 *  GNU 약소 일반 공중 사용 허가서는 이 프로그램과 함께 제공됩니다.
 *  만약 허가서가 누락되어 있다면 자유 소프트웨어 재단으로 문의하시기 바랍니다.
 *
 *-->
 
<h1>우편번호 검색</h1>
 
<!-- 검색 기능이 표시되는 <div> -->
 
<div id="postcodify"></div>
 
<!-- Postcodify 셋팅 -->
 
<script type="text/javascript">
    $("#postcodify").postcodify({
        insertPostcode6 : "#entry_postcode6",
        insertAddress : "#entry_address",
        insertDetails : "#entry_details",
        insertExtraInfo : "#entry_extra_info",
        insertEnglishAddress : "#entry_english_address",
        insertJibeonAddress : "#entry_jibeon_address",
        useFullJibeon : true,
        mapLinkProvider : "google",
        ready : function() {
            $("#postcodify div.postcode_search_status.empty").hide();
        },
        beforeSearch : function(keywords) {
            $("#entry_box").hide();
        },
        afterSelect : function(selectedEntry) {
            $("#postcodify div.postcode_search_result").remove();
            $("#postcodify div.postcode_search_status.summary").hide();
            $("#entry_box").show();
            $("#entry_details").focus();
            /**
             *  만약 팝업창에서 주소를 검색한 경우, 창을 닫거나 다른 폼에 주소를 입력하는 작업은
             *  이곳에 자바스크립트 코드를 추가하여 사용하십시오.
             *  예:
             *  window.opener.document.getElementById("postcode").value = $("#entry_postcode6").val();
             *  window.opener.document.getElementById("address1").value = $("#entry_address").val();
             *  window.opener.document.getElementById("address2").value = $("#entry_extra_info").val();
             *  window.open("", "_self", "");
             *  window.close();
             */
        }
    });
</script>
 
<!-- 검색결과 입력란 -->
 
<div>
    <p><label for="entry_postcode6">우편번호</label><input type="text" id="entry_postcode6" /></p>
    <p><label for="entry_address">도로명주소</label><input type="text" id="entry_address" /></p>
    <p><label for="entry_details">상세주소</label><input type="text" id="entry_details" /></p>
    <p><label for="entry_extra_info">참고항목</label><input type="text" id="entry_extra_info" /></p>
    <p><label for="entry_english_address">영문주소</label><input type="text" id="entry_english_address" /></p>
    <p><label for="entry_jibeon_address">지번주소</label><input type="text" id="entry_jibeon_address" /></p>
</div>
 
<!-- 검색 도움말 -->
 
<div>
    <p>검색 요령</p>
    <ul>
        <li>도로명주소 검색 : 도로명과 건물번호를 입력하세요.   예: <span>세종대로 110</span></li>
        <li>지번주소 검색 : "동" 또는 "리" 이름과 번지수를 입력하세요.   예: <span>연산동 1000</span></li>
        <li>건물명 검색 : 빌딩 또는 아파트 이름을 입력하세요.   예: <span>방배동 래미안</span>, <span>수곡동 주공3차</span></li>
        <li>사서함 검색 : 사서함 이름과 번호를 입력하세요.   예: <span>광화문우체국사서함 123-4</span></li>
    </ul>
    <p>주의사항</p>
    <ul>
        <li>시·군·구·읍·면 등은 쓰지 않아도 되지만, 만약 쓰실 경우 반드시 띄어쓰기를 해 주세요.</li>
        <li>도로명에 "××번길" 등이 포함되어 있는 경우에도 잊지 말고 써 주세요.</li>
        <li>건물명보다는 도로명주소 또는 지번 주소로 검색하시는 것이 빠르고 정확합니다.</li>
    </ul>
</div>    
 
</body>
</html>




<!DOCTYPE html>
<html dir="ltr" lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>우편번호 검색</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="//cdn.poesis.kr/post/popup.min.js" charset="UTF-8"></script>
    <!--[if IE 6]><script type="text/javascript" src="http://cdn.poesis.kr/post/popup.min.js"></script><![endif]-->
</head>
<body>
 
<!--
 *  Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제)
 * 
 *  Copyright (c) 2014-2015, Poesis <root@poesis.kr>
 * 
 *  이 프로그램은 자유 소프트웨어입니다. 이 소프트웨어의 피양도자는 자유
 *  소프트웨어 재단이 공표한 GNU 약소 일반 공중 사용 허가서 (GNU LGPL) 제3판
 *  또는 그 이후의 판을 임의로 선택하여, 그 규정에 따라 이 프로그램을
 *  개작하거나 재배포할 수 있습니다.
 * 
 *  이 프로그램은 유용하게 사용될 수 있으리라는 희망에서 배포되고 있지만,
 *  특정한 목적에 맞는 적합성 여부나 판매용으로 사용할 수 있으리라는 묵시적인
 *  보증을 포함한 어떠한 형태의 보증도 제공하지 않습니다. 보다 자세한 사항에
 *  대해서는 GNU 약소 일반 공중 사용 허가서를 참고하시기 바랍니다.
 * 
 *  GNU 약소 일반 공중 사용 허가서는 이 프로그램과 함께 제공됩니다.
 *  만약 허가서가 누락되어 있다면 자유 소프트웨어 재단으로 문의하시기 바랍니다.
 *
 *-->
 
<h1>우편번호 검색</h1>
 
<!-- 주소 입력란 -->
 
<div>
    <p>
        <label>우편번호</label><input type="text" size="4" class="postcodify_postcode6_1" /> –
        <label></label><input type="text" size="4" class="postcodify_postcode6_2" />  
        <button id="search_button">검색</button>
    </p>
    <p><label>도로명주소</label><input type="text" class="postcodify_address" /></p>
    <p><label>상세주소</label><input type="text" class="postcodify_details" /></p>
    <p><label>참고항목</label><input type="text" class="postcodify_extra_info" /></p>
    <p><label>영문주소</label><input type="text" class="postcodify_english_address" /></p>
    <p><label>지번주소</label><input type="text" class="postcodify_jibeon_address" /></p>
</div>
 
<!-- Postcodify 셋팅 -->
 
<script type="text/javascript">
    $("#search_button").postcodifyPopUp();
</script>
 
</body>
</html>



postcodify (1).PNG




Articles

1 2 3 4 5 6 7 8 9