Multiple rows and multiple columns of div li without refresh paging sample code_PHP tutorial

Flip files load all the content at once, so they are not very suitable for large websites, but are suitable for situations with relatively small data.
This example does not use a database.

PHP Code

Copy code The code is as follows:

JavaScript Code

[/code]
CSS Code

Copy code The code is as follows:

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; }

This example also uses a js jquery.pages.js. Please go to the demo page to view the source code

http://www.bkjia.com/PHPjc/824844.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/824844.htmlTechArticleThe flipping file loads all the content at once, so it is not very suitable for large websites, but suitable for relatively small data situation. This example does not use a database. PHP Code Copy code The code is as follows...