Rumah > Artikel > hujung hadapan web > 利用jquery.page.js如何实现分页效果
这篇文章主要为大家详细介绍了基于jquery.page.js实现的分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
基于jquery.page.js的一款简单的分页效果,供大家参考,具体内容如下
<!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>