페이지 네이션 (Pagination) 은 프로그래밍을 하다보면 피하기 힘든 작업중의 하나입니다.
글을 목록 형태로 출력하려면 어쩔 수 없는데, 이 페이지 네이션을 만들어주는 jQuery 플러그인을 소개합니다.
사용법은 아래와 같습니다.
1. 준비
제공하는 css 와 js 파일을 연결합니다. 저는 굳이 다운받아서 연결하지 않고 아래와 같이 CDN 을 이용했습니다.
워드프레스의 경우 사용중인 테마의 function.php 파일에 아래 코드를 삽입합니다.
|
1 2 3 4 |
if(!is_admin()): wp_enqueue_style('jPages', "//cdn.jsdelivr.net/jpages/0.7/css/jPages.css",array(), false); wp_enqueue_script('jPages', "//cdn.jsdelivr.net/jpages/0.7/js/jPages.min.js",array('jquery'), false); endif; |
일반적인 사용법은 아래처럼 되겠죠.
|
1 2 |
<link rel='stylesheet' href='//cdn.jsdelivr.net/jpages/0.7/css/jPages.css' type='text/css' media='all' /> <script type='text/javascript' src='//cdn.jsdelivr.net/jpages/0.7/js/jPages.min.js'></script> |
2. 페이지네이션이 들어갈 영역과 목록을 지정.
아래 코드를 보겠습니다. 참고로 jpages 사이트의 예제를 그대로 가져왔습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Future navigation panel --> <div class="holder"></div> <!-- Item container (doesn't need to be an UL) --> <ul id="itemContainer"> <!-- Items --> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> ... </ul> |
위의 holder 클래스는 페이지네이션이 들어갈 영역입니다.
밑의 ul#itemContainer 는 페이지 네이션 처리를 할 목록(게시판으로 치면 게시물) 을 감싸고 있는 태그입니다.
3. 실행
|
1 2 3 4 5 6 7 |
jQuery(document).ready(function($){ $("div.holder").jPages({ containerID : "itemContainer" }); }); |
간단하게 해석해보자면 itemContainer 라는 ID 를 가진 태그안의 요소를 페이지네이션 처리하고, 페이지 네이션을 div.holder 에 표시하겠다.. 입니다.
이 플러그인은 저도 자주 사용하는 플러그인입니다. 예제만 보고도 쉽게 사용할 수 있을정도로 사용이 쉽고 옵션 몇개만 변경하면 텝이나 슬라이더처럼 사용할 수도 있습니다.
이미지가 많은곳(갤러리 등) 에 사용할 경우 lazyload 등을 적용할수도 있습니다.
jQuery 의 페이지 네이션 플러그인은 몇가지 더 있는데, 이게 가장 쓰기쉬운것 같습니다.
댓글 남기기
Be the First to Comment!