I wrote the jQuery plug-in for the first time. I feel that I am not doing well. The jQuery plug-in is used to write jQuery. fn: The write process is very detailed. If you are interested, you can understand it. I hope this article will help you write the jQuery plug-in for the first time. I don't feel like writing anything. JQuery. fn is used to write jQuery plug-ins. For example
The Code is as follows:
JQuery. fn. pluginName = function (){};
This is the paging plug-in I wrote.
The plug-in uses an external function to flip pages. This function is called whether you click forward, back, or change the page size.
First, let's look at the code structure of the plug-in.
The Code is as follows:
(Function ($ ){
// Store the attribute fields required by the plug-in
Var PagerFields = {
};
// Private functions of the plug-in
Function setImageButtonSate (){
}
// Public functions of the plug-in
Var methods = {
_ PagerFields: null,
Ini: function (options ){
},
Destory: function (options ){
Return $ (this). each (function (){
Var $ this = $ (this); $ this. removeData ('hgpager2 ');
});
}
};
// Define the plug-in
$. Fn. HGPager2 = function (){
Var method = arguments [0];
If (methods [method]) {
Method = methods [method];
Arguments = Array. prototype. slice. call (arguments, 1 );
}
Else if (typeof (method) = 'object' |! Method ){
Method = methods. ini;
}
Else {
$. Error ('method' + Method + 'does not exist on jQuery. pluginname ');
Return this;
}
Return method. apply (this, arguments );
};
}) (JQuery );
This structure follows the pattern in the document "deep understanding of jQuery plug-in development" (This article personally feels good. It is recommended that you take a look at this article before learning to write plug-ins ). The definition of the entire plug-in and its private variable functions are included in $ (function. Using this method can protect the security of private variables of the plug-in, and avoid the trouble caused by repeated variable names from another perspective. If you place a private variable in $. fn. HGPager2 = function () {} in this function, there will be drawbacks. If the plug-in has some functions to obtain some parameter information of the plug-in (such as the current page number, current page size, and so on) you cannot obtain the exact parameter information. Because the parameter information when the plug-in was constructed based on the js scope theory is different from that when the function is called later. The above mode ensures that the scope of the constructed plug-in is the same as that of the called plug-in function.
Next I will list all the parts of the plug-in.
This is the private variable of the plug-in. It is stored using a PagerFields class.
The Code is as follows:
Var PagerFields = {
PageSize: 10, // page size
PageCount: 0, // Number of pages
RecordCount: 0, // total number of records
CurrentPage: 0, // current page number
PagerFunction: null // The called function triggered when the page is turned, used to read data.
};
This is a private function of the plug-in, used to set the status of the page flip button (the picture of the button is not uploaded, if the code is copied and pasted directly, there is no picture)
The Code is as follows:
Function setImageButtonSate (){
If (PagerFields. currentPage <= 1)
$ ("# HG_pagerPre" 2.16.css ("backgroundPosition", "-3px-3px"); // gray pre
Else
$ ("# HG_pagerPre" 2.16.css ("backgroundPosition", "-3px-19px"); // black pre
If (PagerFields. currentPage = PagerFields. pageCount)
$ ("# HG_pagerNext" ).css ("backgroundPosition", "-20px-3px"); // gray next
Else
$ ("# HG_pagerNext" ).css ("backgroundPosition", "-20px-19px"); // black next
}
This is the function used to construct the plug-in.
The Code is as follows:
Ini: function (options ){
_ PagerFields = PagerFields;
Return this. each (function (){
Var $ this = $ (this );
$ This. text ("");
$ Out_p = $ ("
");
$ This. append ($ out_p );
$ Out_p.append ("
");
$ Out_p.append ("
");
$ Out_p.append ("
");
$ Out_p.append ("page ");
$ Out_p.append ("0 pages in total ");
$ Out_p.append ("");
$ Out_p.append ("per page Records ");
$ Out_p.append ("");
$ Out_p.append ("0 records in total ");
$ Out_p.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! = Undefined &&! Options. selRecord ){
$ ("# SelRecord_p" ).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 );
}
// Setting element
// Bingding event
$ ("# HG_pagerPre"). click (function (){
If (_ pagerFields. currentPage <= 1) return;
Else _ pagerFields. currentPage --;
SetImageButtonSate ();
$ ("# HG_pageNum"). val (_ pagerFields. currentPage );
_ PagerFields. pagerFunction (_ 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. pagerFunction (_ pagerFields. pageSize, _ pagerFields. currentPage );
});
});
}
The following are the public functions of the plug-in.
The Code is as follows:
// Obtain the current page number
GetCurrentPageIndex: function (options ){
Return _ pagerFields. currentPage;
},
// Obtain the total number of records
GetRecordCount: function (options ){
Return _ pagerFields. recordCount;
},
// Obtain the number of current pages
GetCurrentPageCount: function (options ){
Return _ pagerFields. pageCount;
},
// Obtain the page size
GetCurrentPageSize: function (options ){
Return _ pagerFields. pageSize;
}
Example:
The Code is as follows:
$ (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 do not have a thorough understanding of the js scope, I do not know whether this plug-in adopts the mode is the most suitable. If the above content is incorrect, please criticize and correct it.
