Jetons un coup d'œil aux rendus en premier:
Code JS de pagination simple:
1. Description de l'effet:
Plugin jQuery qui peut être affiché sans pagination
JQUERY PAGING PLUGIN - JQUERY.PAGE.JS est très simple à utiliser et a un grand effet
2. Méthode d'appel:
$ (". tcdpagecode"). CreatePage ({PageCount: 10, actuel: 1, backfn: function (p) {// cliquez sur la méthode de rappel, p est le numéro de page actuel}}); PageCount: Nombre total de pages Current: Page actuelle3. Code d'encapsulation JS
// plugin de pagination / ** ch ** / (function ($) {var ms = {init: function (obj, args) {return (function () {Ms.FillHtml (obj, args); Ms.BindEvent (obj, args);}) ();}, // fill html fillhtml: function (obj, args) {return () OBJ.EMPTY (); 4 && args.pageCount! = 4) {obj.append ('<a href = "javascript :;">' + 1+ '</a>'); -2, end = args.current + 2; 1. Args.pageCount> 5) {obj.append ('<span> ... </span>');} if (args.current! = args.pageCount! = 4) {obj.append ('<a href = "javascript:; // page suivante if (args.current <args.pageCount) {obj.append ('<a href = "javascript :;"> page suivante </a>');} else {obj.remove ('. }, // événement de liaison 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) == "fonction") {args.backfn (courant);}}); Ms.FillHtml (obj, {"Current": Current-1, "PageCount": args.pageCount}); parseInt (obj.children (span.current "). Text ()); }}}); }}} $ .fn.createPage = function (options) {var args = $ .extend ({pageCount: 10, actuel: 1, backfn: function () {}}, options); Ms.Init (ceci, args); }}) (jQuery);4. Utilisez la démo:
<! Doctype html> <html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <adrey> <meta Charset = "utf-8" /> <ititle> Un plugin jQuery pagink très simple </tape> <style> * {margin: 0; rembourrage: 0; Style de liste: Aucun;} A {Text-Decoration: Aucun;} A: Hover {Text-Decoration: Aucun;} .tcdpageCode {Padding: 15px 20px; Text-Align: Left; Color: #ccc;} .tcdpagecode a {affichage: en ligne en ligne; Color: # 428BCA; Affichage: dans la ligne de la ligne; en hauteur: 25x; hauteur de ligne: 25px; rembourrage: 0 10px; bordure: 1px solide #ddd; marge: 0 2px; border-radius: 4px; Vertical-Align: Middle;} .tcdpagecode a: hover {text-decoration: Aucun; border: 1px solide # 428bca;} .tcdpagecode span.current {affichage: bloc en ligne; margin: 25px; couleur: 25px; padding: 0 10px; margin: 0 2px; courir: 25px; padding: 0 10px; margin: 2px; courir: 25px; padding: 0 10px; margin: 2px; courir: 25px; padding: 0 10px; margin: 2px; courir: 2 #FFF; Background-Color: # 428BCA; Border: 1px solide # 428BCA; Border-Radius: 4px; Vertical-Align: Middle;} .tcdpagecode Span.Disabled {affichage: bloc en ligne; hauteur: 25px; line-height: 25px; padding: 0 10px; margin: 0 2px; Color: #bfbf; background: # f2f2 #BFBF; Border-Radius: 4px; Vertical-Align: Middle;} </ Style> </ Head> <1 Body> <Myle> .Baidu_Ads {Width: 960px; hauteur: 90px; Position: absolue; Gauche: 50%; en bas: 0; marge-gauche: -480px; Overflow: Hidden;} </ Style> <v> </div> <span style = "Affichage: Aucun;"> </span> <! - Code Part Begin -> <div> </div> <Pre> Méthode d'appel: $ (". TCDPAGECODE"). CREATEPAGE ({PageCount: 10, Current: 1, Backfn: fonction (p) {// Cliquez sur la méthode de l'appel, P est le numéro de page Current}); PageCount: Nombre total de pages: page actuelle </ pre> </ body> <script src = "// www.vevb.com/ajaxjs/jquery.min.js"> </ script> <script src = "// www.vevb.com/ajaxjs/jquery.page.js"> </cript> </cript> $ (". tcdpagecode"). CreatePage ({PageCount: 6, courant: 1, backfn: function (p) {console.log (p);}}); </ script> <! - CODE Part End -> </ html>Ce qui précède est tout sur cet article, j'espère qu'il sera utile à tout le monde d'apprendre JavaScript.