팝업 레이어는 간단하게 우편번호 검색 기능을 사용하기를 원하시는 분들을 위한 방법입니다. 좀더 다양한 커스터마이징을 하고 싶다면 구현 예제 페이지에서 “검색창 직접 구성” 방식을 알아보세요.
웹사이트 디자인이나 브라우저 버전에 따라 팝업 레이어가 정상적으로 표시되지 않을 수도 있으니 반드시 미리 테스트해 보시기 바랍니다. 팝업 레이어 사용에 문제가 있는 경우 검색창을 직접 구성하시는 것이 좋습니다.
아래와 같은 JavaScript 코드를 추가하면 #search_button을 클릭할 경우 팝업 레이어가 나타나게 할 수 있습니다.
$("#search_button").postcodifyPopUp();
주소를 선택한 후에는 아래의 목록에 나열된 class 속성을 가진 태그에 해당 정보가 자동으로 입력됩니다.
그 밖의 설정은 필요하지 않으며, CSS 스타일링도 모두 자동으로 제공됩니다.
| 클래스명 | 입력되는 정보 |
|---|---|
postcodify_postcode |
새 우편번호 (기초구역번호) |
postcodify_postcode5 |
새 우편번호 (기초구역번호) |
postcodify_postcode6 |
기존 우편번호 전체 |
postcodify_postcode6_1 |
기존 우편번호 앞자리 |
postcodify_postcode6_2 |
기존 우편번호 뒷자리 |
postcodify_address |
도로명주소 |
postcodify_details |
상세주소 (주소 선택 후 이곳으로 커서 이동) |
postcodify_extra_info |
참고항목 (법정동, 건물명 등) |
postcodify_jibeon_address |
지번주소 |
postcodify_english_address |
영문 도로명주소 |
postcodify_english_jibeon_address |
영문 지번주소 |
postcodify_building_id |
행정자치부 건물관리번호 |
postcodify_building_name |
건물명 (공동주택인 경우) |
postcodify_building_nums |
아파트 동번호 범위 |
postcodify_other_addresses |
행정동, 관련지번 등 기타 정보 |
사용할 태그에 이미 class 속성이 있는 경우 공백으로 구분하면 됩니다.
예: 주소 입력란이 아래와 같이 코딩되어 있는 경우
<input type="text" name="address" class="myclass" value="" />
아래와 같이 변경하면 됩니다.
<input type="text" name="address" class="myclass postcodify_address" value="" />
jQuery 플러그인 매뉴얼에 나열된 모든 옵션을 사용할 수 있으나, 일부 항목은 기본값이 이미 지정되어 있을 수도 있습니다.
그 밖에 jQuery 플러그인에서는 사용할 수 없고 팝업 레이어에서만 유효한 옵션은 아래와 같습니다.
container : 위에 나열된 클래스를 가진 태그를 찾을 때,
문서 전체를 검색하지 않고 특정 태그 아래에서만 검색합니다.
한 페이지에 여러 개의 검색창을 구현해야 할 경우 (예: 집 주소, 직장 주소) 유용한 옵션입니다.
파라미터는 jQuery 객체를 사용해야 합니다.onSelect : 팝업 레이어에서 특정 주소를 선택하면 호출할 콜백 함수입니다.
주소 입력란을 숨겨 두었다가 주소 선택 후에 표시하도록 하거나,
그 밖의 다양한 추가 기능들을 구현할 때 유용한 옵션입니다.
파라미터는 함수를 사용해야 합니다.