ホームページ > 記事 > ウェブフロントエンド > JQuery_jquery に基づくページャー実装コード
JQuery_jquery に基づくページャー実装コード
- WBOYオリジナル
- 2016-05-16 18:23:021185ブラウズ
レンダリング例は次のとおりです。
使用方法
jQuery ライブラリ ファイルと JQuery を使用する必要があります。ページャー ライブラリ ファイル(現在のバージョン 1.1)
マテリアルの準備
Paginator CSS スタイル ファイル。次の CSS スタイルをコピーして、Pager.css という名前を付けることができます
コードをコピーします コードは次のとおりです:
#pager ul.pages {
display :ブロック;
ボーダー:なし;
フォントサイズ:10px;
パディング:0; >#pager ul.pages li {
リストスタイル:なし;
ボーダー:1px ソリッド #ccc;
テキスト装飾:なし; 0 0;
padding:5px;
}
#pager ul.pages li:hover {
border:1px Solid #003f7e;
#pager ul.pages li. pgEmpty {
border:1px ソリッド # eee;
color:#eee;
#pager ul.pages li.pgCurrent {
border:1px ソリッド #003f7e; :#000;
フォントの太さ:700;
背景色:#eee>}
サンプルコード
1、ファイル部分を含む
コードをコピー
コードは次のとおりです:
< ;link href="Pager.css" rel="stylesheet " type="text/css" /> 2. HTML 部分 (ページネータ表示 div)
コードは次のとおりです以下のように:
Biyou Blog jQuery Paginator
コードをコピー
4. JavaScript コード (JQuery Pager 呼び出し) の分析
(1)$("#pager") 。 pager({}); 部分
pagenumber は、次のような最初のページ番号を表します。 1
pagecount は、次のような合計ページ数を表します。 15
buttonClickCallback は、クリックすることによって呼び出されるメソッドを表します。ページ番号ボタン。:PageClick
(2)PageClick = function(pageclickednumber) {} 部分
PageClick など。クリックされたページ数をカスタマイズするときの関数メソッドを表します。次のようになります。 function(pageclickednumber ){}
jQuery プラグイン JQuery Pager は、JavaScript ページング関数を実現するために、開始ページ番号 pagenumber、最大ページ番号 pagecount、およびページ番号がクリックされたときに buttonClickCallback を呼び出す関数メソッドのみを必要とします。実際のアプリケーションでは、PageClick メソッドの簡単な変更のみが必要です。たとえば、pagenumber と pagecount が変数として設定されている場合は、JQuery Pager を使用して JavaScript ページング関数を実装できます。同時に、jQuery プラグインの JQuery Pager ページング buttonClickCallback メソッドを使用して、豊かな動的効果を実現できます。
http://demo.jb51.net/js/jquery-pager/index.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。