Maison >interface Web >js tutoriel >Comment créer un effet de pagination avec jquery
Cette fois, je vais vous montrer comment créer un effet de pagination avec jquery. Quelles sont les précautions pour utiliser jquery pour créer un effet de pagination. Ce qui suit est un cas pratique, jetons un coup d'oeil.
Un effet de pagination simple basé sur jquery.page.js pour votre référence. Le contenu spécifique est le suivant
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单的jQuery分页插件</title> <style> *{ margin:0; padding:0; list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} .tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} </style> </head> <body> <br><br><br> <p class="tcdPageCode"></p> <center><pre class="brush:php;toolbar:false"><br><script> $(".tcdPageCode").createPage({ pageCount:100, current:1, backFn:function(p){ console.log(p); } }); </script>