ページング更新なしの div li の複数の行と複数の列のサンプル コード_PHP チュートリアル

フリップ ファイルはすべてのコンテンツを一度に読み込むため、大規模な Web サイトにはあまり適していませんが、データが比較的小さい状況には適しています。
この例ではデータベースを使用しません。

PHP コード

コードをコピーします コードは次のとおりです:

?php } ?>




script type="text/javascript" >
$(document).ready(function() {
$("div.holder").jPages({
containerID : "content",

perPage: 6
});
script>
[/code]
CSS コード



コードは次のとおりです。 arial,sans-serif;
フォントサイズ: 11px;
.container {
幅: 100%;
マージン: 0 自動;

/* */ ul { margin: 0; padding: 20px 0px;

ul li {

display: inline-height: 100px;
font -太さ: 100ピクセル;
マージン: 10ピクセル;
色: #fff;
/* @@ ページネーション
*/
.holder { マージン: 5px 0; }
フォント サイズ: 12px;
カーソル: ポインタ;
色: #333; 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: 太字
}
.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: デフォルト;
background: none ;
}
.holder spam { margin: 0 5px; }


この例では jquery.pages.js を使用しています。ソース コードを表示するには、デモ ページにアクセスしてください。



http://www.bkjia.com/PHPjc/824844.html

www.bkjia.com

tru​​e

http://www.bkjia.com/PHPjc/824844.html

技術記事

フリップ ファイルはすべてのコンテンツを一度に読み込むため、大規模な Web サイトにはあまり適していませんが、データが比較的小さい状況には適しています。 この例ではデータベースを使用しません。 PHP コード コードをコピーする コードは次のようなものです...