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 金额数字转换成英文
May 06 PHP
深入了解PHP类Class的概念
Jun 14 PHP
php面向对象 字段的声明与使用
Jun 14 PHP
PHP中最容易忘记的一些知识点总结
Apr 28 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
Jun 12 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
Jul 11 PHP
php简单获取文件扩展名的方法
Mar 24 PHP
CodeIgniter自定义控制器MY_Controller用法分析
Jan 20 PHP
php 数组字符串搜索array_search技巧
Jul 05 PHP
浅谈PHP中关于foreach使用引用变量的坑
Nov 14 PHP
php实现统计二进制中1的个数算法示例
Jan 23 PHP
php获取是星期几的的一些常用姿势
Dec 15 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解析目录路径的3个函数总结
2014/11/18 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
自我鉴定注意事项
2014/01/19 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
联欢会开场白
2015/06/01 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
教导处教学工作总结
2015/08/12 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技