JQuery_jquery를 기반으로 한 호출기 구현 코드

렌더링 예시는 다음과 같습니다.



사용방법
jQuery 라이브러리 파일과 JQuery를 사용해야 합니다. Pager 라이브러리 파일(현재 버전 1.1)

재료 준비
Paginator CSS 스타일 파일, 다음 CSS 스타일을 복사하여 Pager.css라는 이름을 지정할 수 있습니다

코드 복사 코드는 다음과 같습니다.

#pager ul.pages {
display :block;
테두리:없음;
글꼴 크기:10px;
여백:0
#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc>text-꾸밈:none
margin:0 5px 0 0;
padding:5px
}
#pager ul.pages li:hover {
border:1px solid #003f7e;
#pager ul.pages li. pgEmpty {
border:1px solid # eee;
color:#eee;
}
#pager ul.pages li.pgCurrent {
border:1px solid #003f7e; :#000;
글꼴 무게 :700;
배경색:#eee;



예제 코드


1, 파일부분 포함

코드 복사
코드는 다음과 같습니다.

< ;link href="Pager.css" rel="stylesheet " type="text/css" /> ;

CSS 스타일 파일 1개와 JS 라이브러리 파일 2개.

2. HTML 부분(페이지네이터 표시 div)

코드 복사
코드는 다음과 같습니다:

Biyou 블로그 jQuery Paginator

> 3. JavaScript 부분(jQuery 플러그인 JQuery Pager 호출)

코드 복사
코드는 다음과 같습니다.

4. JavaScript 코드(JQuery Pager 호출) 분석

(1)$("#pager") . pager({}); 부분
pagenumber는 다음과 같이 초기 페이지 번호를 나타냅니다. 1
pagecount는 다음과 같이 총 페이지 수를 나타냅니다. 15
buttonClickCallback은 :PageClick

(2)PageClick = function(pageclickednumber) {} 부분 PageClick과 같은 페이징 번호 버튼은 다음과 같이 클릭한 페이지 수를 사용자 정의할 때 함수 메서드를 나타냅니다. ){}
jQuery 플러그인 JQuery Pager에는 시작 페이지 번호 pagenumber, 최대 페이지 번호 pagecount 및 페이지 번호를 클릭할 때 버튼ClickCallback을 호출하는 함수 메서드만 있으면 javascript 페이징 기능이 구현됩니다. 실제 응용에서는 PageClick 메소드를 간단히 수정하면 됩니다. 예를 들어 pagenumber와 pagecount를 변수로 설정하면 JQuery Pager에서 javascript 페이징 기능을 통해 페이지 값을 전달할 수 있습니다. 동시에, jQuery 플러그인 JQuery Pager 페이징 버튼ClickCallback 메소드는 참고용으로 풍부한 동적 효과를 얻을 수 있습니다.
데모 코드:
http://demo.jb51.net/js/jquery-pager/index.html