Schauen wir uns zuerst die Renderings an:
Einfacher Paging JS -Code:
1. Effektbeschreibung:
JQuery -Plugin, das ohne Pagination angezeigt werden kann
JQuery Paging Plugin - jQuery.page.js ist sehr einfach zu bedienen und hat einen großartigen Effekt
2. Anrufmethode:
$ (". TCDPAGECODE"). CreatePage ({pageCount: 10, aktuell: 1, backfn: function (p) {// Klicken Sie auf die Rückrufmethode, p ist die aktuelle Seitennummer}}); PageCount: Gesamtzahl der Seiten aktuell: aktuelle Seite3. JS -Kapselungscode
// Pagination Plugin/** CH **/(Funktion ($) {var ms = {init: function (obj, args) {return (function () {ms.fillhtml (obj, args); ms.bindeDevent (obj, args); Obj.Empty (); 4 && args.pagecount! -2, end = args.current+2; 1) {if (start! args.pagecount> 5) {obj.append ('<span> ... </span>'); // nächste Seite (args }, //Binding event bindEvent:function(obj,args){ return (function(){ obj.on("click","a.tcdNumber",function(){ var current = parseInt($(this).text()); ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); if (typeof (args.backfn) == "Funktion") {args.backfn (aktuell); ms.fillhtml (obj, "current": current-1, "pageCount": args.pagecount}); ParseInt (obj.Children ("span.current"). Text ()); }}}); }}} $ .fn.createpage = function (options) {var args = $ .extend ({pageCount: 10, aktuell: 1, backfn: function () {}}, Optionen); Frauinit (dies, Args); }}) (jQuery);4. Verwenden Sie Demo:
<!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title> A very simple jQuery paging plugin</title> <style> *{ margin:0; Polsterung: 0; list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;} .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; Zeilenhöhe: 25px; Polsterung: 0 10px; Rand: 1px fest #ddd; Rand: 0 2px; Border-Radius: 4px; Vertical-Align: Middle;} .tcDpageCode A: Hover {Textdekoration: None; Border: 1px Solid #428bca;} .tcdpagecode span.streue {Display: Inline-Block; Höhe: 25px; Line-Hefl: 25px; 2px; Farbe: #fff; Hintergrundfarbe: #428bca; Grenze: 1px Feststoff #428bca; Border-Radius: 4px; Vertical-Align: Middle;} .tcDpageCode Span. #bfbf; Border-Radius: 4px; Vertical-Align: Middle;} </style> </head> <body> <style> .baidu_ads {width: 960px; Höhe: 90px; Position: absolut; Links: 50%; unten: 0; Rand-Links: -480px; Überlauf: Hidden;} </style> <div> </div> <span style = "display: keine;"> </span> <!-Code-Teil begin-> <div> </div> <pre> call-Methode: $ (". TCDPAGECODE"). PageCount: Gesamtzahl der Seiten: Aktuelle Seite </pre> </body> <script src = "// www.vevb.com/ajaxjs/jquery.min.js"> </script> <script src = "// www.vevb.com/ajaxjs/jquery.page.js.js $ (". TCDPAGECODE"). CreatePage ({pageCount: 6, aktuell: 1, backfn: function (p) {console.log (p);}}); </script> <!-Code-Teil-Ende-> </html>Das obige dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, JavaScript zu lernen.