php记录集多行多列分页,PHP_div li的多行多列 无刷新分页示例代码，翻页文件一次加载了全部的内 - phpStudy...

div li的多行多列 无刷新分页示例代码

翻页文件一次加载了全部的内容，因而不是很适合大型的网站，而适用于数据比较少的情况。

本例未使用数据库。

PHP Code

JavaScript Code

$(document).ready(function() {

$("div.holder").jPages({

containerID : "content",

perPage: 6

});

});

[/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 请到演示页面查看源码相关阅读:

xp系统电脑一玩游戏就闪屏的故障原因及多种解决方法

ASP.NET简单好用功能齐全图片上传工具类(水印、缩略图、裁剪等)

简介iOS开发中应用SQLite的模糊查询和常用函数

ASP.NET笔记之广告控件的使用方法

Javascript小技巧之生成html元素

html的DOM中document对象images集合用法实例

asp.net中的“按需打印”(打印你需要打印的部分) 实现代码

判断请求头中是否含有某属性来判断是否是ajax请求

AngularJS入门教程之服务(Service)

jquery事件与函数的使用介绍

C#实现在图像中绘制文字图形的方法

Android系统模拟位置的使用方法

div和css制作斜线示例分享

C#实现动态加载dll的方法