jQuery.fn을 사용하여 jQuery 페이지 전환 플러그인_jquery를 사용자 정의하세요.

jQuery 플러그인을 작성하는 것은 이번이 처음입니다. 저도 글이 별로 좋지 않은 것 같습니다. jQuery 플러그인은

코드 복사와 같이 jQuery.fn을 사용하여 작성됩니다. 코드는 다음과 같습니다.

jQuery.fn.pluginName=function(){}

제가 작성한 페이징 플러그인은 다음과 같습니다
플러그인은 페이지 넘김 작업을 수행하는 데 사용되는 외부 함수를 전달합니다. 이 함수는 앞으로 클릭하거나 뒤로 클릭하거나 페이지 크기를 변경할 때 호출됩니다.
먼저 플러그인의 코드 구조를 살펴보세요

코드를 복사하세요 코드는 다음과 같습니다:

(function ($) {
//플러그인에 필요한 저장소 속성 필드
var PagerFields = {
};
//Private 플러그인의 함수
function setImageButtonSate() {
}
//플러그인의 공용 함수
var method = {
_pagerFields: null,
ini: 함수 (옵션) {
},
destory: 함수(옵션) {
return $(this).each(function () {
var $this = $(this); $this.removeData ('HGPager2');
});
}
};
//플러그인 정의
$.fn.HGPager2 = function () {
var 메소드 = 인수 [0];
if (메소드[메서드]) {
메소드 = 메소드[메서드];
arguments = Array.prototype.slice.call(arguments, 1)
else if (typeof (메서드) == '객체' || !method) {
method =method.ini;
}
else {
$.error('메서드 '메서드'는 그렇지 않습니다. jQuery.pluginName에 존재');
return this;
}
return method.apply(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") //회색 사전

else
$("#HG_pagerPre").css( "BackgroundPosition", "-3px -19px"); // 검정색 사전
if (PagerFields.currentPage == PagerFields.pageCount)
$(" #HG_pagerNext").css("BackgroundPosition", "-20px -3px"); //회색 다음
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("

< 스팬 id='HG_pagerPre' 스타일='배경 위치:-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("BackgroundPosition", "-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 {
var default_page_size = [10, 30, 50];
for (var i = 0; i < default_page_size.length; 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);
}
// 요소 설정
// 빙딩 이벤트
$("#HG_pagerPre").click(function () {
if (_pagerFields.currentPage <= 1) return;
else _pagerFields.currentPage--;
setImageButtonSate();
$("#HG_pageNum").val(_pagerFields.currentPage)
_pagerFields.pageSize, _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);
setImageButtonSate()
_pagerFields.pageSize, _pagerFields.currentPage); });
});
}



下side是插件的公共函数

复主代码 代码如下: //获取当前的页码

getCurrentPageIndex: 함수(옵션) {

return _pagerFields.currentPage;
},
//获取记录的总数
getRecordCount: function (options) {
return _pagerFields.recordCount;
},
//获取当前页면수량
getCurrentPageCount: 함수(옵션) {
return _pagerFields.pageCount;
},
//获取页면적 거대
getCurrentPageSize: 함수(옵션) {
return _pagerFields.pageSize;
}



使用示例

：

复主代码 代码如下:

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

저는 아니기 때문에 js에 익숙하지 않아 범위를 충분히 이해하지 못하고, 이 플러그인이 채택한 모델이 가장 적합한지 모르겠습니다. 위 내용에 잘못된 점이 있으면 비판하고 정정해 주시기 바랍니다.