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新手上路(十一)
Oct 09 PHP
关于Intype一些小问题的解决办法
Mar 28 PHP
PHP文件读写操作之文件读取方法详解
Jan 13 PHP
ThinkPHP模板Switch标签用法示例
Jun 30 PHP
一款简单实用的php操作mysql数据库类
Dec 08 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
May 13 PHP
解决nginx不支持thinkphp中pathinfo的问题
Jul 21 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
Jun 07 PHP
实现php删除链表中重复的结点
Sep 27 PHP
PHP实现用session来实现记录用户登陆信息
Oct 15 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
Jun 12 PHP
Laravel框架创建路由的方法详解
Sep 04 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 数据库树的遍历方法
2009/02/06 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
会展中心部门工作职责
2013/11/27 职场文书
派出所所长先进事迹
2014/05/19 职场文书
专家推荐信范文
2015/03/26 职场文书
停电放假通知
2015/04/14 职场文书
聘任通知书
2015/09/21 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
CentOS安装Nginx并部署vue
2022/04/12 Servers
Nginx利用Logrotate实现日志分割
2022/05/20 Servers