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

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

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

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

本例未使用数据库。

 

演示

 

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