먼저 렌더링을 살펴 보겠습니다.
간단한 페이징 JS 코드 :
1. 효과 설명 :
Pagination없이 표시 할 수있는 jQuery 플러그인
jQuery Paging Plugin -JQuery.page.js는 사용이 매우 간단하고 효과가 있습니다.
2. 통화 방법 :
$ ( ". tcdpagecode"). createpage ({pagecount : 10, current : 1, backfn : function (p) {// 콜백 메소드를 클릭하십시오. p는 현재 페이지 번호}}); PageCount : 총 페이지 수 : 현재 페이지3. JS 캡슐화 코드
// Pagination Plugin/** ch **/(함수 ($) {var ms = {init : function (obj, args) {return (function () {ms.fillhtml (obj, args); ms.bindevent (obj, args);}) ();}, // fill html fillhtml : function (obj, function) {) OBJ.EMPTY (); // 이전 페이지 if (Args.Current> 1) {href = "> prevpage '); args.pagecount! = 4) {obj.append ( 'a href = "javaScript :;">'+1+ '</a>'); -2, args.current+2; 1) {if (start! = args.current) {obj.append ( '<a href = "javaScript :;">' + start + '</a>'); args.pagecount> 5) {obj.append ( '<span> ... </span>'); // args.current <args.pagecount) {obj.append ( '<a href =; "> 다음 페이지} else {obj.remove ('. nextpage '); }, // 바인딩 이벤트 bindevent : function (obj, args) {return (function () {obj.on ( "click", "a.tcdnumber", function () {var current = parseint ($ (this) .text ()); ms.fillhtml (obj, { "current": "pagecount"); if (Args.backfn) == "function"{args.backfn (current)}; Ms.fillhtml (obj, {current ":"pagecount ": args.backfn) =="args.backfn (current-1}); parseint ( "span.current"). }}}); }}} $ .fn.createpage = function (옵션) {var args = $ .extend ({pagecount : 10, current : 1, backfn : function () {}}, 옵션); Ms.init (this, args); }}) (jQuery);4. 데모 사용 :
<! docType html> <html lang = "zh-cn"xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta charset = "utf-8"/> <title> 매우 간단한 JQuery 페이징 플러그인 </title> <style> *{margin : 0; 패딩 : 0; 목록 스타일 : none;} a {text-decoration : none;} a : 호버 {text-decoration : none;} .tcdpagecode {padding : 15px 20px; 텍스트-앨범 : 왼쪽; color : #ccc;} .tcdpagecode a {inline-block; color : #428bca; inline-block; 라인 높이 : 25px; 패딩 : 0 10px; 테두리 : 1px solid #ddd; 마진 : 0 2px; Border-Radius : 4px; vertical-align : middle;} .tcdpagecode a : hover {hover {hover {hover {hover {hover {hover {hover {hover {hover {hover : 1px solid #428bca;} .tcdpagecode span.current {display : inline-block; #fff; 배경색 : #428BCA; 국경 : 1px solid #428bca; Border-Radius : 4px; 수직-정렬 : 중간;} .tcdpagecode span.disabled {디스플레이 : 인라인-블록; 높이 : 25px; 선-높이 : 25px; 패딩 : 0 10px; 마진 : 0 2px; 색상 : #bfbfbf; #bfbfbf; #BFBF; Border-Radius : 4px; 수직-정상 : 중간;} </style> </head> <body> <styt> .baidu_ads {width : 960px; 높이 : 90px; 위치 : 절대; 왼쪽 : 50%; 하단 : 0; 마진 왼쪽 : -480px; 오버플로 : hidden;} </style> <div> </div> <span style = "display : none;"> ">"> </span> <!-코드 부분 시작-> <div> </div> <pre> 호출 메소드 : $ ( ". tcdpagecode"). PageCount : 현재 페이지 수 : 현재 페이지 </pre> </body> <script src = "// www.vevb.com/ajaxjs/jquery.min.js"> </script> <script src = "// www.vevb.com/ajax.jquery.page.js"> </script> </script> $ ( ". tcdpagecode"). createpage ({pagecount : 6, current : 1, backfn : function (p) {console.log (p);}}); </script> <!-코드 부품 종료-> </html>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람이 JavaScript를 배우는 것이 도움이되기를 바랍니다.