Share a self written jQuery paging plug in

Work need a JS paging plug-in, wish myself to write a, way to get to the Internet to find a don't know the structure of the code, the problems difficult to solve, and the online plug-in contains too many functions, some don't use, no need to load the JS, and remembered not written a jQuery plugin, when practiced hand, well, look at the results:

(link: http://demo.jb51.net/js/2014/EasyPage/)

  A brief overview of what the plug-in does

  The background will query out of the content all displayed on the page, the plug-in to control the content, so that it is displayed page by page. It has the function of previous page, next page, home page and last page. On the first page, on the previous page, the home page should be hidden. On the last page, the last page, the next page to hide. Only a few buttons are displayed at a time, and when the last button is clicked, the next few are displayed.

  Here's a quick look at the coding process:

First of all, you can write down the following code boldly:

//For better compatibility, start with a semicolon
;(
function($){//Use $as a parameter for the anonymous function
}
)(jQuery)//Pass jQuery as an argument to an anonymous function

This code should be familiar to you, is javascript's god-level feature - closure. This is also a common structure for jQuery plug-ins. Why use closures as such a common structure for jQuery, both to prevent internal temporary variables from affecting global space, and to continue using $as the jQuery alias within the plug-in.

The next step is to write your own methods in this structure. JQuery provides two ways to extend methods in jQuery. Open the jQuery API, find the plug-in mechanism, and you can see two methods

The & # 8226; JQuery. The extend (object)   Extends the jQuery object itself. Used to add new functions to the jQuery namespace.
The & # 8226; JQuery. Fn. The extend (object)   Extend the set of jQuery elements to provide new methods (often used to make plug-ins).
As you can see above, jquery.extend (object) extends jQuery itself, which is equivalent to adding static methods to jQuery in terms of Java or C#. Let's say we write:

jQuery.extend({
 "max":function(){
  return max;
 } 
}) 

In this way, it is equivalent to adding a Max method to the jQuery object, which can be called as follows: jquery.max ()

So, what is jQuery. Fn? Open the source of jQuery, you can see that jQuery. Fn = jQuery. Prototype. So jQuery.fn.extend is equivalent to adding a member function to jQuery.

So you can see the difference between the two, static methods can be called directly, jquery.max (). Member functions can only be called by jQuery instances, such as jQuery("#my").max().

Here I use the jquery.extend method. The code is as follows:

;(
 function($){
  $.extend({
   "easypage":function(options){
   options = $.extend({//Parameter Settings
   contentclass:"contentlist",//The class of the content to be displayed
   navigateid:"navigatediv",//The id of the container where the navigation button resides
   everycount:"5",//How many are displayed per page
   navigatecount:"5"//How many navigation buttons are displayed at a time
   }, options); 
}); 

Easypage is using paging plugin to use the name of the method, contentclass, navigateid, everycount, navigatecount is parameters.

With the basic framework set up, the next step is to complete the functionality.

The first step is to find the content to page and generate the navigation button. The code is as follows:

var currentpage = 0;//The current page
var contents = $("."+options.contentclass);//What to display
var contentcount = contents.length;//I get the number of contents
var pagecount = Math.ceil(contentcount/options.everycount);//Number of pages
//Splicing navigation button
var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'> Home page </a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'> The previous page </a></div>";
for(var i = 1;i <= pagecount;i++){
 navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
}
navigatehtml+="<div id='pagenext' class='pagenext'><a href='javascript:void(0)'> The next page </a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'> back </a></div>";
 //Load navigation button

$("#"+options.navigateid).html(navigatehtml) 

 This code is relatively simple, so I won't go into it. 

The next step is to implement some basic functions, here extract two of the display

//Hide all navigation buttons
$.extend({
"hidenavigates":function(){
//Iterate over all navigation buttons
navigates.each(function(){
$(this).hide();
}) 
} 
});
 
//Display navigation button
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
//If the current button is less than the number of buttons required to be displayed at once, it will be displayed from 0
var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
//Make sure the number of buttons is 2*options. Navigatecount, starting from the second page
if(begin>navigates.length-2*options.navigatecount){
begin = navigates.length-2*options.navigatecount; 
}
//Began to show
for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
$(navigates[i]).show();
}
} 
});

  Ok, the basic code flow is so, the program's source code in the attachment, the specific function has been explained clearly in the source code comments. For those who still have questions about closures, check out my last blog post on javascript closures.

Here is a summary of the basic points of jQuery plug-ins, from the sharp jQuery extract.

The & # 8226; The file name of the plug-in is recommended as jquery.[plug-in name].js, such as jquery. Color. Js
The & # 8226; All object methods should be attached to the jQuery.fn object, and all global functions should be attached to the jQuery object itself

The & # 8226; Inside the plug-in, this points to the jQuery object currently retrieved through the selector, instead of the usual method, such as the click() method, which points to the DOM element

The & # 8226; All elements can be traversed by this.each
The & # 8226; All method or function plugins should end with a semicolon, or else there might be problems with compression. For safety, put a semicolon at the beginning of the plugin
The & # 8226; The plug-in should return a jQuery object, which ensures chained operations for the plug-in. Unless the plug-in needs to return something that needs to be fetched, such as a string or an array
The & # 8226; Always use closure techniques to avoid variable name conflicts
 

Because the first time to write jQuery plug-in, there may be some things wrong, please forgive me.