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

div li的多行多列 无刷新分页
本例与《Jquery一页内翻页,类似于无刷新分页》很相近而区别与其他本站发布的翻页代码
翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用于数据比较少的情况。
本例未使用 数据库
 
演示
 
PHP Code
<div class="container">  
  
          
  
        <ul id="content">  
            <?php for ($i=1; $i<=53; $i++){?>  
            <li><span><?php echo $i?></span></li>  
            <?php }?>  
        </ul>  
        <div class="holder"></div>  
    </div>  
JavaScript Code
<script type="text/javascript">  
$(document).ready(function() {  
    $("div.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; }  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值