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

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

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

本例未使用数据库。

 

演示

 

PHP Code

<p class="container">  

  

          

  

        <ul id="content">  

            <?php for ($i=1; $i<=53; $i++){?>  

            <li><span><?php echo $i?></span></li>  

            <?php }?>  

        </ul>  

        <p class="holder"></p>  

    </p>  

JavaScript Code

<script type="text/javascript">  

$(document).ready(function() {  

    $("p.holder").jPages({  

        containerID : "content",  

        perPage: 6  

    });  

});  

</script>  

css

CSS Code

body {  

  text-align: left;  

  direction: ltr;  

  font-family:tahoma,verdana,arial,sans-serif;  

  font-size: 11px;  

}  

  

  

  

  

  

.container {  

  width: 370px;  

  height: 100%;  

  margin: 0 auto;  

  

}  

  

  

  

/* 

  @@ Demo 

*/  

ul {  

  margin: 0;  

  padding: 20px 0px;  

}  

  

ul li {  

  list-style-type: none;  

  display: inline-block;  

  line-height: 100px;  

  text-align: center;  

  font-weight: bold;  

  width: 100px;  

  height: 100px;  

  margin: 10px;  

  background: #ccc;  

}  

  

ul li span {  

  color: #fff;  

  padding: 3px;  

}  

  

/* 

  @@ Pagination 

*/  

.holder { margin: 5px 0; }  

  

.holder a {  

  font-size: 12px;  

  cursor: pointer;  

  margin: 0 5px;  

  color: #333;  

}  

  

.holder a:hover {  

  background-color: #222;  

  color: #fff;  

}  

  

.holder a.jp-previous { margin-right: 15px; }  

.holder a.jp-next { margin-left: 15px; }  

  

.holder a.jp-current, a.jp-current:hover {   

  color: #ed4e2a;  

  font-weight: bold;  

}  

  

.holder a.jp-disabled, a.jp-disabled:hover { color: #bbb; }  

  

.holder a.jp-current, a.jp-current:hover,  

.holder a.jp-disabled, a.jp-disabled:hover {  

  cursor: default;   

  background: none;  

}  

  

.holder span { margin: 0 5px; }