首页>>分页>>div li的多行多列 无刷新分页(2013-10-03)

div li的多行多列 无刷新分页

本例与《Jquery一页内翻页,类似于无刷新分页》很相近而区别与其他本站发布的翻页代码

翻页文件一次加载了全部的内容，因而不是很适合大型的网站，而适用于数据比较少的情况。

本例未使用数据库。

 

div li的多行多列 无刷新分页
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

PHP Code
  1. <div class="container">  
  2.   
  3.           
  4.   
  5.         <ul id="content">  
  6.             <?php for ($i=1; $i<=53; $i++){?>  
  7.             <li><span><?php echo $i?></span></li>  
  8.             <?php }?>  
  9.         </ul>  
  10.         <div class="holder"></div>  
  11.     </div>  
JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.     $("div.holder").jPages({  
  4.         containerID : "content",  
  5.         perPage: 6  
  6.     });  
  7. });  
  8. </script>  

css

CSS Code
  1. body {  
  2.   text-align: left;  
  3.   direction: ltr;  
  4.   font-family:tahoma,verdana,arial,sans-serif;  
  5.   font-size: 11px;  
  6. }  
  7.   
  8.   
  9.   
  10.   
  11.   
  12. .container {  
  13.   width: 370px;  
  14.   height: 100%;  
  15.   margin: 0 auto;  
  16.   
  17. }  
  18.   
  19.   
  20.   
  21. /* 
  22.   @@ Demo 
  23. */  
  24. ul {  
  25.   margin: 0;  
  26.   padding: 20px 0px;  
  27. }  
  28.   
  29. ul li {  
  30.   list-style-type: none;  
  31.   display: inline-block;  
  32.   line-height: 100px;  
  33.   text-align: center;  
  34.   font-weight: bold;  
  35.   width: 100px;  
  36.   height: 100px;  
  37.   margin: 10px;  
  38.   background: #ccc;  
  39. }  
  40.   
  41. ul li span {  
  42.   color: #fff;  
  43.   padding: 3px;  
  44. }  
  45.   
  46. /* 
  47.   @@ Pagination 
  48. */  
  49. .holder { margin: 5px 0; }  
  50.   
  51. .holder a {  
  52.   font-size: 12px;  
  53.   cursor: pointer;  
  54.   margin: 0 5px;  
  55.   color: #333;  
  56. }  
  57.   
  58. .holder a:hover {  
  59.   background-color: #222;  
  60.   color: #fff;  
  61. }  
  62.   
  63. .holder a.jp-previous { margin-right: 15px; }  
  64. .holder a.jp-next { margin-left: 15px; }  
  65.   
  66. .holder a.jp-current, a.jp-current:hover {   
  67.   color: #ed4e2a;  
  68.   font-weight: bold;  
  69. }  
  70.   
  71. .holder a.jp-disabled, a.jp-disabled:hover { color: #bbb; }  
  72.   
  73. .holder a.jp-current, a.jp-current:hover,  
  74. .holder a.jp-disabled, a.jp-disabled:hover {  
  75.   cursor: default;   
  76.   background: none;  
  77. }  
  78.   
  79. .holder span { margin: 0 5px; }  

本例还使用了一个js jquery.pages.js 请到演示页面查看源码


原文地址:http://www.freejs.net/article_fenye_51.html