티스토리 뷰
https://postcodify.poesis.kr/guide/example
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- 주소와 우편번호를 입력할 <input>들을 생성하고 적당한 name과 class를 부여한다 --> <input type="text" name="" class="postcodify_postcode5" value="" /> <button id="postcodify_search_button">검색</button><br /> <input type="text" name="" class="postcodify_address" value="" /><br /> <input type="text" name="" class="postcodify_details" value="" /><br /> <input type="text" name="" class="postcodify_extra_info" value="" /><br /> <!-- jQuery와 Postcodify를 로딩한다 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script> <!-- "검색" 단추를 누르면 팝업 레이어가 열리도록 설정한다 --> <script> $(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script> | cs |
이미 jQuery를 사용하고 있는 경우에는 search.min.js 파일만 로딩하셔도 됩니다.
검색창 직접 구현
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- 검색 기능을 표시할 <div>를 생성한다 --> <div id="postcodify"></div> <!-- 주소와 우편번호를 입력할 <input>들을 생성하고 적당한 name과 id를 부여한다 --> <input type="text" name="" id="postcode" value="" /><br /> <input type="text" name="" id="address" value="" /><br /> <input type="text" name="" id="details" value="" /><br /> <input type="text" name="" id="extra_info" value="" /><br /> <!-- jQuery와 Postcodify를 로딩한다 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script> <!-- 위에서 생성한 <div>에 검색 기능을 표시하고, 결과를 입력할 <input>들과 연동한다 --> <script> $(function() { $("#postcodify").postcodify({ insertPostcode5 : "#postcode", insertAddress : "#address", insertDetails : "#details", insertExtraInfo : "#extra_info", hideOldAddresses : false }); }); </script> | cs |
'API' 카테고리의 다른 글
summernote 에디터 (사용법) (0) | 2017.07.25 |
---|---|
C3.js 차트 API (0) | 2017.07.25 |
Chart.js 사용법 / 적용법 (0) | 2017.07.25 |
NicEdit ( WYSIWYG textarea 를 대체하여 사용. ) (0) | 2017.07.23 |
핸들바스 handlebars (0) | 2017.07.23 |
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 르프리크
- Lalavel
- 터미널
- html
- textcleaver
- globals.properties
- 관리자설정
- Mac
- floating button
- 아파치
- 이클립스
- 성수뚝떡
- 오라클
- juso.go.kr
- Tomcat
- 성수밥
- 또오류
- server.xml
- 소년아저씨
- 정규식
- 위잇딜라이트
- 톰캣
- 토라식당
- input
- Eclipse
- LTFViewr
- 맥
- 힘냉면록
- Apach
- 최고심
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함