jQuery paging plugin update

jQuery paging plugin

내가 이걸 개발하고 방치한 지 3년이 지났다.
하지만 의외로 사람들이 페이징 플러그인을 찾다가 내 블로그에 들리기도 한다.
그리고 어느 블로그에서 내가 만든 페이징 플러그인을 소개하기도 했다.
그래도 돌아가긴 하나보다. 안정적으로.

그래서 오늘 오랜만에 재대로 손 좀 대봤다.
0.1.7 에서 0.2.0 으로 업데이트 했다.
기존 버전과 달라진 건 크게 없는데, append 속성이 쓸모 없어져서 제거하고, className 으로 컨테이너 관리 편의성을 높여준 업데이트이다.
나머진 기존 그대로 쓰면 되긴 하지만, 좀 더 편리하게
재호출할 때를 대비하여 일부 속성만 정의해도 기존 속성에서 정의 속성을 덮어씌워 페이징을 구성하겠끔 만들었다.
그렇다 보니 destroy 키워드가 생겼다.

아, 그리고 마지막으로 이건 문서에 안넣었는데, .paging(‘속성명’) 을 통해 속성값을 불러올 수 있다.
이는 아직 실험 단계지만, 조만간 편리하게 페이징이 처리되도록 할 생각이다.

프로젝트 페이지는 여기로 가면 되고,
bower 설치도 지원한다. bower install jquery.paging

언제까지나 유의사항은 “스타일링은 알아서 하라” 이다.

앞으로도 많은 성원 바란다.
감사하다.

독자: 이 미친새끼가 반말하고 지랄이야.

composite / 2016년 1월 26일 / Piss Development / 2 Comments

jQuery Paging Plugin

업데이트: 제이쿼리 페이징 플러그인 0.2.0 업데이트! 아래 설명 쌩까고 Github 으로 신속히 이동하라!

실무에 많이 쓰지만 은근히 빡센 페이징. 동적 페이징에 머리 짜매고 계신가? 여기 종결자가 있다.

jQuery Paging Plugin!

가볍다. 2KB밖에 안되며 gzip 압축 시 1KB도 안될 것이다.

빠르다. 페이징 외 쓰잘데기 없는 효과나 부가기능 따위는 없다.

쉽다. 한줄이면 페이징 초기화가 끝난다. 서버에서 불러와야 할 거는 현재 페이지와 총 페이지 수, 그뿐이다.

동적이던 정적이던 다 된다. 전통 방식 게시판이던 ajax 로 만든 게시판이던 입맛에 맞게 쓸 수 있다.

오픈소스다. 당신이 죽쓰던 밥쓰던 상관않는 MIT 라이센스다. 물론 더 좋은 방법 있으면 공유하는 것은 미덕!

사용법?

$(‘#paging’).paging({current:5,max:50}); //총 50 페이지 중 5 페이지로 시작하는 페이징을 불러올 것이다.

이거덕분에 프로젝트 잘되서 제작자한테 커피 한잔 쏘고 싶으면 ukjinplant at hotmail dot com 으로 연락해도 된다.

그럼 다운로드는?

소스(개발용) 다운로드 | 최적화(실무용) 다운로드 | 프로젝트 홈페이지

페이징 방식이 여러가진데 이 페이징 플러그인의 롤모델이 뭐인지 궁금하면 여기여기 를 클릭하여 확인해보라.

jQuery.Paging

jQuery를 위한 간단한 페이징.

사용법 : $('#paging').paging({max:50});

속성 :
item : 페이징 요소 태그명, 기본값 "a".
itemClass : 페이징 요소 중 페이지 수 CSS 클래스, 기본값 "paging-item".
itemCurrent : 현재 페이지를 나타내는 CSS 클래스이며 페이징 요소와 중첩됨, 기본값 "selected".
format : 페이지를 나타낼 내용, 기본값 "[%d]".
sideClass : 다음 또는 이전 버튼 CSS 클래스, 기본값 "paging-side".
next : 다음 버튼 내용. 기본값 "[{5}>]" ("[>]")
prev : 이전 버튼 내용. 기본값 "[{4}&lt;]" ("[<]")
first : 첫 페이지 내용. 기본값 "[1&lt;&lt;]"
last : 마지막 페이지 내용. 기본값 "[&gt;&gt;{6}]"
length : 페이지 표시할 개수. 기본값 10.
max : 최대 표현할 페이지 수. 기본값 1.
current : 현재 페이지 정의. 기본값 1.
href : a 태그일 때 링크 주소를 정의. 기본값 "#%d"
append : true 설정 시, 기존 내용을 삭제하지 않고 페이징을 포함시킴. 기본값 false.
event : 기본 이벤트 활성화. 새로고침 없이 동적으로 페이징 초기화됨. ajax에 유용. 기본값 true.
>event=true 일 때 가능한 이벤트 정의.
onclick : 페이징 버튼 클릭 시 호출. false 반환 시 동적으로 페이지가 바뀌지 않음. 동적 페이징을 원하지만
                  href로 인한 링크 이동을 원하지 않을 경우 이벤트 메서드인 event.stopPropagation() 호출.
onprev : 이전 버튼 초기화 시 이벤트. 'this' 는 이전 버튼 요소를 가리킴.(plain DOM. not jQuery!)
onnext : 다음 버튼 초기화 시 이벤트. 'this' 는 다음 버튼 요소를 가리킴.(plain DOM. not jQuery!)
onitem : 각 페이지 버튼 초기화 시 이벤트. 'this' 는 각 페이지 버튼 요소를 가리킴.

치환자 (format,next,prev,href,first,last 속성 전용)
{0} = 클릭 시 페이지
{1} = 페이지 길이
{2} = 처음 페이지
{3} = 마지막 페이지
{4} = 이전 파트의 마지막 페이지
{5} = 다음 파트의 처음 페이지
{6} = 맨 마지막 페이지

판올림 내역
0.1.0 : 초기 버전
0.1.5 :
처음 페이지 및 마지막 페이지 추가. 내용에 치환자 적용 가능.
'append' 옵션 추가 : true 설정 시 기존 내용이 삭제되지 않고 포함됨.
{6} 치환자는 마지막 페이지(max 값과 동일) 를 가리킴
0.1.6 : first 또는 last 내용에 false 설정시 만들지 않도록 기능 추가.

composite / 2012년 10월 11일 / Piss Development / 10 Comments