Share a self-written jQuery paging plug-in _ jquery

This article is mainly to share with you some ideas and steps of jquery paging plug-ins. This paging plug-in features are very simple, but it is very practical. You don't want other plug-ins, and there are a lot of functions. Okay, I don't want to talk about it. I need a JS paging plug-in to read the text. I want to write a plug-in by myself. When I get online, I find a plug-in that doesn't know the code structure, and the problem is hard to solve, in addition, the plug-ins on the Internet contain too many functions, and some cannot be used at all, so there is no need to load that JS. Second, I think that I have never written the jQuery plug-in. I just need to practice it. Okay, first look at the results:

Http://demo.jb51.net/js/2014/EasyPage/

Briefly describe the functions implemented by this plug-in.

The background displays all the queried content on the page. This plug-in needs to control the content so that one page is displayed. Supports the previous, next, home, and last pages. On the first page, you must hide the previous page and homepage. At the end of the last page, the next page must be hidden. Only a few buttons are displayed at a time. When the last button is clicked, the following buttons are displayed.

Next, let's briefly talk about the encoding process:

First, you can write down the following code:

// For better compatibility, there is a semicolon before the start; (function ($) {// $ is used as an anonymous function parameter here}) (jQuery) // pass jQuery as a real parameter to an anonymous Function

You should be familiar with this code, that is, the closure of javascript. This is also a common structure of jQuery plug-ins. Why do we need to use closures for the common structure of jQuery? In this way, we can avoid the impact of internal temporary variables on the global space, and continue to use $ as the alias of jQuery in the plug-in.

The next step is to write your own method in this structure. jQuery provides two methods to expand the method in jQuery. Open the jQuery API and find the plug-in mechanism. You can see two methods.

• JQuery. extend (object) extends the jQuery object itself. Adds a new function to the jQuery namespace.
• JQuery. fn. extend (object) extends the jQuery element set to provide new methods (usually used to create plug-ins ).
From the above we can see that jQuery. extend (object) is an extension of jQuery itself. From the perspective of java or C #, it is equivalent to adding a static method to jQuery. For example, we write:

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

In this way, it is equivalent to adding a max method to the jQuery object. You can call this method when calling: jQuery. max ()

So what is jQuery. fn? Open the jQuery source code and you can see jQuery. fn = jQuery. prototype. Then jQuery. fn. extend is equivalent to adding a member function to jQuery.

In this case, you should understand the difference between the two. Static methods can be called directly, jQuery. max (). Only jQuery instances can call member functions, such as jQuery ("# my"). max ().

Here I use the jQuery. extend method. The Code is as follows:

; (Function ($) {$. extend ({"easypage": function (options) {options = $. extend ({// set the contentclass: "contentlist", // The class navigateid: "navigatep" of the content to be displayed, // the id of the container where the navigation button is located everycount: "5", // how many navigatecount entries are displayed on each page: "5" // how many navigatecount entries are displayed at a time}, options );});

Easypage is the method name used by the paging plug-in. contentclass, navigateid, everycount, and navigatecount are parameters.

The basic framework has been set up, and the next step is to complete the function.

First, find the content to be paged and generate the navigation button. The Code is as follows:

Var currentpage = 0; // var contents = $ (". "+ options. contentclass); // var contentcount = contents. length; // obtain the number of contents var pagecount = Math. ceil (contentcount/options. everycount); // calculate the page number // splice the navigation button var navigatehtml ="
Homepage
Previous Page
"; For (var I = 1; I <= pagecount; I ++) {navigatehtml + ='
'+ I +'
';} Navigatehtml + ="
Next Page
Last page
"; // Load the navigation button $ (" # "+options.navigateid.html (navigatehtml.

The next step is to implement some basic functions. Here we extract two of them for display.

// Hide all navigation buttons $. extend ({"hidenavigates": function () {// traverse all navigation buttons navigates. each (function () {$ (this ). hide () ;}}}); // display the navigation button $. extend ({"shownavigate": function (currentnavigate) {$. hidenavigates (); // if the current button is smaller than the required number of buttons, var begin = currentnavigate> = options is displayed from 0. navigatecount? Currentnavigate-parseInt (options. navigatecount): 0; // make sure that the number of buttons is 2 * options from the second page. navigatecountif (begin> navigates. length-2 * options. navigatecount) {begin = navigates. length-2 * options. navigatecount;} // start to display for (var I = begin; I <currentnavigate + parseInt (options. navigatecount); I ++) {$ (navigates [I]). show ();}}});

Well, the basic code process is like this. The source code of the program is included in the attachment, and the specific function implementation has been clearly explained in the source code annotations. If you have any questions about closures, refer to my previous blog to talk about javascript closures.

The following summarizes the basic points of the jQuery plug-in.

• The file name of the plug-in is recommended to jquery. [plug-in name]. js, such as jquery. color. js.
• All object methods should be appended to the jQuery. fn object, and all global functions should be appended to the jQuery object itself.

• Inside the plug-in, this points to the jQuery object that is currently obtained through the selector. Unlike the general method, such as the click () method, the internal this points to the DOM element.

• You can use this. each to traverse all elements.
• All methods or function plug-ins should end with semicolons. Otherwise, compression may fail. Some add a semicolon at the beginning of the plug-in to make it more secure.
• The plug-in should return a jQuery object to ensure the chained operation of the plug-in. Unless the plug-in needs to return some quantities to be obtained, such as strings or Arrays
• Use closure techniques whenever possible to avoid variable name conflicts

For the first time I wrote the jQuery plug-in, something may be wrong. Please forgive me.