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 相关文章推荐
dedecms模版制作使用方法
Apr 03 PHP
Optimizer与Debugger兼容性问题的解决方法
Dec 01 PHP
php获取网页内容方法总结
Dec 04 PHP
PHP语言中global和$GLOBALS[]的分析 之二
Feb 02 PHP
php 获取页面中指定内容的实现类
Jan 23 PHP
php微信开发之批量生成带参数的二维码
Jun 26 PHP
php投票系统之增加与删除投票(管理员篇)
Jul 01 PHP
PHP微信API接口类
Aug 22 PHP
[原创]PHP实现SQL语句格式化功能的方法
Jul 28 PHP
PHP-X系列教程之内置函数的使用示例
Oct 16 PHP
PHP Post获取不到非表单数据的问题解决办法
Feb 27 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
Sep 17 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实现禁用IE和火狐的缓存问题
2012/12/03 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP实现验证码校验功能
2017/11/16 PHP
自动最大化窗口的Javascript代码
2013/05/22 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
面包屑导航详解
2017/12/07 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
js中apply和call的理解与使用方法
2019/11/27 Javascript
js实现轮播图特效
2020/05/28 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
python列表的常用操作方法小结
2016/05/21 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Python3处理HTTP请求的实例
2018/05/10 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python函数参数分类原理详解
2020/05/28 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
服务生自我鉴定
2014/01/22 职场文书
2014年采购部工作总结
2014/11/20 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
python单向链表实例详解
2022/05/25 Python