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

当前位置 : 首页 > 网页制作 > CSS > div li的多行多列 无刷新分页

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

来源: 作者: 时间:2016-01-28 09:27
div li的多行多列 无刷新分页本例与《Jquery一页内翻页,类似于无刷新分页》很相近而区别与其他本站发布的翻页代码翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用
div li的多行多列 无刷新分页
本例与《Jquery一页内翻页,类似于无刷新分页》很相近而区别与其他本站发布的翻页代码
翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用于数据比较少的情况。
本例未使用。
 
演示
 
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>  
Script Code
<script type="text/javascript">  
$(document).ready(function() {  
    $("div.holder").jPages({  
        containerID : "content",  
        perPage: 6  
    });  
});  
</script>  
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; }  
Tag:
网友评论

<