Share a self-written jQuery paging plug-in, jquery Paging

Share a self-written jQuery paging plug-in, jquery Paging

I need a JS paging plug-in for my work. I want to write one by myself. When I access the Internet, I find a plug-in with an unclear code structure, which is difficult to solve, and the plug-in on the Internet contains too many functions, some cannot be used at all, so there is no need to load that section of JS. Second, I think that I haven't written the jQuery plug-in. I just need to train my hands. Well, let's take a look at the results first:

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 of the content to be displayed: "navigatediv", // 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 = "<div id = 'pagefirst 'class = 'pagefirst'> <a href = 'javascript: void (0) '> homepage </a> </div> <div id = 'pagepre' class = 'pagepre'> <a href = 'javascript: void (0) '> 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) '> next page </a> </div> <div id = 'pagelast' class = 'pagelast '> <a href = 'javascript: void (0) '> last page </a> </div> "; // The code for loading the navigation button $ (" # "+options.navigateid#.html (navigatehtml) is relatively simple and will not be discussed more.

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.

A jquery data paging plug-in is recommended.

Google jquery Paging

JQuery plug-in development. When developing paging, I need to use a value in the plug-in as a callback function out for use, but I do not know the callback function.

"Use a value in the plug-in as a callback function "? I don't understand your requirements too much, but provide an example of a callback function:
Function callback (msg) {alert (msg);} function showErrorMsg (errorCode, massager) {var msg = ''; switch (errorCode) {case 1: msg = 'Time out! '; Break; case 2: msg = 'net error! '; Break; default: msg = 'no error! '} // Call the callback function messager (msg);} showErrorMsg (1, callback); // call the function and input the callback function callbackpad, let's take a look at it 〜