jQuery.fn を使用して jQuery ページ回転 plug-in_jquery をカスタマイズする

jQuery プラグインを作成するのは初めてです。文章もあまり上手ではないような気がします。 jQuery プラグインは、

コードをコピーします などの jQuery.fn を使用して記述されます。コードは次のとおりです。次のように:

jQuery.fn.pluginName=function(){};

これは私が作成したページング プラグインです
プラグインは、ページ送り操作を実行するために使用される外部関数を渡します。この関数は、前方クリック、後方クリック、またはページ サイズの変更に関係なく呼び出されます。
まずプラグインのコード構造を確認します

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

(function ($) {
//プラグインに必要なストレージ属性フィールド
var PagerFields = {
};
//Privateプラグインの関数
function setImageButtonSate() {
}
//プラグインのパブリック関数
varmethods = {
_pagerFields: null,
ini: function (オプション) {
},
destory: function ( options) {
return $(this).each(function () {
var $this = $(this); $this.removeData ('HGPager2');
}
};
// プラグインを定義します
$.fn.HGPager2 = function () {
var メソッド = 引数[0];
if (メソッド[メソッド]) {
メソッド = メソッド [メソッド];
引数 = Array.prototype.slice.call(引数, 1); else if (typeof (method) == 'object' || !method) {
method =messages.ini;
}
else {
$.error('Method ' ' は、 jQuery.pluginName に存在します');
return this;
})(jQuery); >
この構造は、「jQuery プラグイン開発の徹底理解」という記事のパターンに基づいています (この記事は個人的には良いと思います。プラグインの作成を学習したばかりの友達は、最初にこの記事を読むことをお勧めします) ）。プラグイン定義全体とそのプライベート変数関数は $(function(){}); でラップされます。これにより、プラグインのプライベート変数のセキュリティを守ることができ、別の観点からは、変数名の重複によるトラブルも回避できます。関数 $.fn.HGPager2 = function () {} にプライベート変数を置く場合、プラグインの一部のパラメーター情報 (現在のパラメーターなど) を取得するために一部の関数をプラグインの外部に配置すると、不利な点が生じます。ページ番号、現在のページサイズなど）、正確なパラメータ情報を取得できません。 jsのスコープ理論によれば、プラグイン構築時のパラメータ情報と、後から関数に入るスコープは異なるためです。上記のモードでは、プラグインの構築時とプラグイン関数の呼び出し時に入力されるスコープが同じであることが保証されます。

プラグインのさまざまな部分を以下に示します。

これはプラグインのプライベート変数であり、PagerFields クラスに保存されます。

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

var PagerFields = { pageSize: 10, / /ページ サイズpageCount: 0,//ページ数recordCount: 0,//総レコード数currentPage: 0,//現在のページ番号pagerFunction: null / /データを読み取るためのページ関数をめくるときに呼び出されます。

};

これは、ページ ボタンのステータスを設定するために使用されるプラグインのプライベート関数です (ボタンの画像は、コピーして貼り付けるとアップロードされません)コードを直接コードすると、画像はありません)




コードをコピー

コードは次のとおりです:

function setImageButtonSate() { if (PagerFields.currentPage < ;= 1) $("#HG_pagerPre").css("backgroundPosition", "-3px -3px"); //grey pre else $("#HG_pagerPre").css( "backgroundPosition", "-3px -19px"); // 黒のプレ if (PagerFields.currentPage == PagerFields.pageCount)

$(" #HG_pagerNext").css("backgroundPosition", "-20px -3px"); //グレー next

else
$("#HG_pagerNext").css("backgroundPosition", "-20px -19px" ); // black next
}



これはプラグインを構築する関数です

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

ini: 関数 (オプション) {
_pagerFields = PagerFields;
return this.each(function () {
var $this = $(this);
$this.text("");
$out_div = $("

");
$this.append($out_div);
$out_div.append("

< span id='HG_pagerPre' style='background-position:-3px -19px'>

");
$out_div.append("

");
$out_div.append("< div>

");
$out_div.append("页 ");
$out_div.append("共0页");
$out_div.append(" ");每页个记录");
$out_div.append(" ");
$out_div.append("共有 0 个记录");
$out_div.append(" ");
$this.append("
");
$this. find("#HG_pagerPre").css("背景位置", "-3px -3px");
$this.find("#HG_pagerNext").css("backgroundPosition", "-20px -3px");
if (options.pageSizes) {
for (var i = 0; i < options.pageSizes.length; i ) {
$("#HG_pagerSize").append("; " options.pageSizes[i] "");
}
_pagerFields.pageSize = options.pageSizes[0];
}
else {
vardefault_page_size = [10, 30, 50];
for (var i = 0; i $("#HG_pagerSize").append(""default_page_size[i] "" );
}
_pagerFields.pageSize =default_page_size[0];
}
if (options.selRecord != 未定義 && !options.selRecord) {
$("#selRecord_div").css("display", 'none');
}
if (options.pagerFuncton) {
_pagerFields.pagerFunction = options.pagerFuncton;
}
if (options.recordCount) {
_pagerFields.recordCount = options.recordCount;
$("#HG_recordCount").text(_pagerFields.recordCount);
_pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize);
$("#HG_pageCount").text(_pagerFields.pageCount);
_pagerFields.currentPage = 1;
$("#HG_pageNum").val(_pagerFields.currentPage);
setImageButtonSate();
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage);
}
// 設定要素
// binging イベント
$("#HG_pagerPre").click(function () {
if (_pagerFields.currentPage <= 1) return;
else _pagerFields.currentPage--;
setImageButtonSate();
$("#HG_pageNum").val(_pagerFields.currentPage); ;
});
$("#HG_pagerNext").click(function () {
if (_pagerFields.currentPage == _pagerFields.pageCount) return;
else _pagerFields.currentPage ;
setImageButtonSate();
$("#HG_pageNum").val(_pagerFields.currentPage);
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage);
$("#HG_pagerSize").change(function () {
_pagerFields.pageSize = $this.find("option:selected").text() * 1;
_pagerFields.pageCount = _pagerFields .recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize);
$("#HG_pageCount").text(_pagerFields.pageCount); 🎜>_pagerFields.currentPage = 1;
$("#HG_pageNum").val(1);
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); });
});
}



下は插件のパブリック関数

复制代

代コード如下: //取得当前の页コード getCurrentPageIndex: function (options) { return _pagerFields.currentPage; },

//取记录の検索数

getRecordCount: function (options) {
return _pagerFields.recordCount;
},
//获取当前页面数
getCurrentPageCount: function (options) {
return _pagerFields.pageCount;
},
//获取页面の大きさ
getCurrentPageSize: function (options) {
return _pagerFields.pageSize;
}



使用例
：

复制代

:

$(function () {
$("#testPager").HGPager2({
pageSizes: [10, 20, 30],
recordCount: 123,
pagerFuncton : function (size, index) {
alert("size: " size " index: " index);
}
});
});
function test_Click() {
alert(
$("#testPager").HGPager2("getCurrentPageIndex") " "
$("#testPager").HGPager2("getRecordCount") " "
$("#testPager ").HGPager2("getCurrentPageCount") " "
$("#testPager").HGPager2("getCurrentPageSize")
);
}

Because I am not familiar with js I don’t understand the scope thoroughly enough, and I don’t know whether the model adopted by this plug-in is the most suitable. If there is anything wrong in the above content, please criticize and correct me.