div li的多行多列 無刷新分頁示例代碼
更新時間：2013年10月16日 17:23:32 作者：
翻頁文件一次加載了全部的內(nèi)容，因而不是很適合大型的網(wǎng)站，而適用于數(shù)據(jù)比較少的情況，下面有個不錯的示例，感興趣的朋友可以參考下
翻頁文件一次加載了全部的內(nèi)容，因而不是很適合大型的網(wǎng)站，而適用于數(shù)據(jù)比較少的情況。
本例未使用數(shù)據(jù)庫。
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 請到演示頁面查看源碼
本例未使用數(shù)據(jù)庫。
PHP Code
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
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 請到演示頁面查看源碼
相關(guān)文章
$_FILES: 經(jīng)由 HTTP POST 文件上傳而提交至腳本的變量。類似于舊數(shù)組 $HTTP_POST_FILES 數(shù)組（依然有效，但反對使用)2013-07-07
對象池模式是一種提前準(zhǔn)備了一組已經(jīng)初始化了的對象『池』而不是按需創(chuàng)建或者銷毀的創(chuàng)建型設(shè)計模式。對象池客戶端會向?qū)ο蟪刂姓埱笠粋€對象，然后使用這個返回的對象執(zhí)行相關(guān)操作。當(dāng)客戶端使用完畢，它將把這個特定類型的工廠對象返回給對象池，而不是銷毀掉這個對象。2021-05-05
PHP將二維數(shù)組某一個字段相同的數(shù)組合并起來的方法
這篇文章主要介紹了PHP將二維數(shù)組某一個字段相同的數(shù)組合并起來的方法,涉及PHP多維數(shù)組操作的相關(guān)技巧,需要的朋友可以參考下2016-02-02
PHP中l(wèi)ocaleconv()函數(shù)的用法
今天小編就為大家分享一篇關(guān)于PHP中l(wèi)ocaleconv()函數(shù)的用法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
linux C語言對 php 擴(kuò)展的設(shè)置技巧2008-12-12
怎樣使用php與jquery設(shè)置和讀取cookies
有兩種處理cookies的方式—服務(wù)端(php,asp等)和客戶端(javascript).在這個教程中，我們將學(xué)習(xí)到以php和javascript這兩種方式如何去創(chuàng)建cookies2013-08-08
php實(shí)現(xiàn)解析xml并生成sql語句的方法
這篇文章主要介紹了php實(shí)現(xiàn)解析xml并生成sql語句的方法,涉及php針對xml格式文件的讀取、解析及sql字符串拼接相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
php下用cookie統(tǒng)計用戶訪問網(wǎng)頁次數(shù)的代碼
利用cookie統(tǒng)計用戶訪問網(wǎng)頁次數(shù)的代碼，需要的朋友可以參考下。作為學(xué)習(xí)cookies的資料，不推薦使用。2010-05-05
php中3des加密的結(jié)果與.Net/java不同的帖子與話題實(shí)在是太多了，我前不久也在倒騰這些，不過今天已經(jīng)搞定了,完全與.net中的兼容2012-08-08
這篇文章主要介紹了PHP6新特性,簡單分析了PHP6中出現(xiàn)的新特性,具有一定參考借鑒價值,需要的朋友可以參考下2016-03-03