ホームページ >ウェブフロントエンド >jsチュートリアル >カプセル化された JavaScript フロントエンド ページング プラグイン pagination_javascript スキル

カプセル化された JavaScript フロントエンド ページング プラグイン pagination_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 15:22:172371ブラウズ

概要:
最近、フロントエンド ページングは​​開発プロジェクトで使用されており、将来の使用の便宜のために、ライブラリに依存せずにサードパーティのプラグインとしてパッケージ化されています。インターネット上にはすでに多くのプラグインが存在しますが、なぜ自分たちで車輪を再発明する必要があるのでしょうか?

私自身が作成し、拡張性が高い
ライブラリに依存しません
技術的な降水量として

まずレンダリングを見てみましょう

インストール方法

最初に css と js をページにロードします

使用例

ページネーション({
Cur: 1, // 現在のページ番号
Total: 6, // 合計ページ数
Len: 5, // 表示するページ数
targetId: 'pagination', // ページネーション要素バインディング
コールバック: function() {
// コールバック関数 }
})

パラメータの紹介

カー

現在のページ番号、各呼び出しは現在のページングを渡します

合計

総ページ数は、総ページ数と各ページに表示されている数から取得できます

レン

ページネーションバーに表示される数量

ターゲットID

ページ要素のバインディング

コールバック

イベントバインディングなど、ページレンダリング完了後に実行される関数。

ヒント

デモでは静的データを使用します。サーバー側データを呼び出す場合は、index.js ファイル内の for ループを Ajax リクエストに変更するだけです。

ダウンロード

http://xiazai.jb51.net/201601/yuanma/pagination-master(jb51.net).zip

デモ

http://demo.jb51.net/js/2016/pagination-master/

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。