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 相关文章推荐
留言板翻页的实现详解
Oct 09 PHP
php 从数据库提取二进制图片的处理代码
Sep 09 PHP
在PHP中PDO解决中文乱码问题的一些补充
Sep 06 PHP
php 安全过滤函数代码
May 07 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
Nov 07 PHP
php判断一个数组是否为有序的方法
Mar 27 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
Jan 08 PHP
php中的常用魔术方法汇总
Feb 14 PHP
php求今天、昨天、明天时间戳的简单实现方法
Jul 28 PHP
PHP+MYSQL实现读写分离简单实战
Mar 13 PHP
PHP设计模式之工厂模式实例总结
Sep 01 PHP
PHP实现的字符串匹配算法示例【sunday算法】
Dec 19 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
德劲1103二次变频版的打磨
2021/03/02 无线电
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python网络编程之五子棋游戏
2020/05/14 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
不遵守课堂纪律的检讨书
2014/09/24 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
护士个人年终总结
2015/02/13 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书