div li的多行多列 无刷新分页示例代码


Posted in PHP onOctober 16, 2013

翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用于数据比较少的情况。
本例未使用数据库。
div li的多行多列 无刷新分页示例代码 
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>
[/code]
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; }

本例还使用了一个js jquery.pages.js 请到演示页面查看源码
PHP 相关文章推荐
php垃圾代码优化操作代码
Aug 05 PHP
探讨:如何编写PHP扩展
Jun 13 PHP
destoon实现公司新闻详细页添加评论功能的方法
Jul 15 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
Dec 04 PHP
php对xml文件的增删改查操作实现方法分析
May 19 PHP
PHP SFTP实现上传下载功能
Jul 26 PHP
PHP闭包定义与使用简单示例
Apr 13 PHP
PHP自定义错误处理的方法分析
Dec 19 PHP
PHP支付宝当面付2.0代码
Dec 21 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
Oct 21 PHP
php使用redis的有序集合zset实现延迟队列应用示例
Feb 20 PHP
Thinkphp极验滑动验证码实现步骤解析
Nov 24 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
Oct 16 #PHP
PHP字符串长度计算 - strlen()函数使用介绍
Oct 15 #PHP
php后台如何避免用户直接进入方法实例
Oct 15 #PHP
php下拉选项的批量操作的实现代码
Oct 14 #PHP
php登陆页的密码处理方式分享
Oct 14 #PHP
PHP设置图片文件上传大小的具体实现方法
Oct 11 #PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
Oct 10 #PHP
You might like
如何隐藏你的.php文件
2007/01/04 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python 数据结构之旋转链表
2017/02/25 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python实现倒计时小工具
2019/07/29 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
2014学年自我鉴定
2014/02/23 职场文书
金融与证券专业求职信
2014/06/22 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
优秀班主任材料
2014/12/16 职场文书
招标保密承诺书
2015/01/20 职场文书
导游词300字
2015/02/13 职场文书
公司车队管理制度
2015/08/04 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书