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新手用的Insert和Update语句构造类
Mar 31 PHP
Linux下实现PHP多进程的方法分享
Aug 16 PHP
linux实现php定时执行cron任务详解
Dec 24 PHP
2014年最新推荐的10款 PHP 开发框架
Aug 01 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
Jun 13 PHP
PHP执行shell脚本运行程序不产生core文件的方法
Dec 28 PHP
php实现数据库的增删改查
Feb 26 PHP
php实现留言板功能
Mar 05 PHP
详解php框架Yaf路由重写
Jun 20 PHP
PHP基于socket实现客户端和服务端通讯功能
Jul 13 PHP
浅谈PHP发送HTTP请求的几种方式
Jul 25 PHP
thinkPHP5框架实现基于ajax的分页功能示例
Jun 12 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
一个对于js this关键字的问题
2007/01/09 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python 多进程和数据传递的理解
2017/10/09 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python 变量的创建过程详解
2019/09/02 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
Python netmiko模块的使用
2020/02/14 Python
python将unicode和str互相转化的实现
2020/05/11 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
公司合作协议书范本
2014/04/18 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
《日月潭》教学反思
2016/02/20 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python