Share a self-written jQuery paging plug-in_jquery

I need a JS paging plug-in for work, and I thought about writing one myself. I went online and found one that I didn’t know the code structure of, and it was difficult to solve the problem. Moreover, the plug-ins on the Internet contained too many functions, and some of them were not useful at all. Then, there is no need to load that piece of JS. Secondly, I remembered that I have never written a jQuery plug-in, so I just practiced it. Okay, let’s look at the results first:

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

Let’s briefly talk about the functions this plug-in implements

The background will display all the queried content on the page. This plug-in should control the content so that it can be displayed page by page. There are functions of previous page, next page, home page and last page. When on the first page, the previous page and the home page should be hidden. On the last page, the last page, and the next page should be hidden. Only a few buttons are displayed at a time, and when the last button is clicked, the next few are displayed.

Let’s briefly talk about the encoding process:

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

//为了更好的兼容性，开始前有个分号
;(
function($){//此处将$作为匿名函数的形参
}
)(jQuery)//将jQuery作为实参传递给匿名函数

This code should be familiar to everyone. It is the god-level feature of JavaScript--closure. This is also a common structure for jQuery plugins. Why use closures to make this common structure of jQuery? On the one hand, it can avoid internal temporary variables from affecting the global space, and you can continue to use $ as an alias for jQuery inside 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 and find the plug-in mechanism. You can see two methods

• jQuery.extend(object) extends the jQuery object itself. Used to add new functions to the jQuery namespace.
• jQuery.fn.extend(object) extends the jQuery element set to provide new methods (usually used to make plug-ins).
From the above, you can see that jQuery.extend(object) extends jQuery itself. From the perspective of languages ​​​​such as java or C#, it is equivalent to adding a static method to jQuery. For example, we write like this:

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

In this way, it is equivalent to adding a max method to the jQuery object. When calling, you can call it like this: 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 in jQuery.

You should understand the difference between the two now. The static method 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({//参数设置
   contentclass:"contentlist",//要显示的内容的class
   navigateid:"navigatediv",//导航按钮所在的容器的id
   everycount:"5",//每页显示多少个
   navigatecount:"5"//导航按钮一次显示多少个
   }, 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 functions.

The first thing is to find the content to be paginated and generate navigation buttons. The code is as follows:

var currentpage = 0;//当前页 
var contents = $("."+options.contentclass);//要显示的内容
var contentcount = contents.length;//得到内容的个数
var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
//拼接导航按钮
var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'>首页</a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'>上一页</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)'>下一页</a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'>尾页</a></div>";
 //加载导航按钮

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

这段代码比较简单，就不多讲。

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

//隐藏所有的导航按钮
$.extend({
"hidenavigates":function(){
//遍历所有的导航按钮
navigates.each(function(){
$(this).hide();
}) 
} 
});
 
//显示导航按钮
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
//当前按钮如果小于要求一次显示按钮个数的，从0开始显示
var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
//这里保证从第二页开始，按钮的个数都是2*options.navigatecount
if(begin>navigates.length-2*options.navigatecount){
begin = navigates.length-2*options.navigatecount; 
}
//开始显示
for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
$(navigates[i]).show();
}
} 
});

Ok, the basic code flow is like this. The source code of the program is in the attachment. The specific function implementation has been explained clearly in the source code comments. If you still have questions about closures, you can check out my previous blog to talk about JavaScript closures.

The following summarizes the basic points of the jQuery plug-in. Haha, it is excerpted from sharp jQuery.

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

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

•You can traverse all elements through this.each
•All method or function plug-ins should end with a semicolon, otherwise problems may occur during compression. Some add a semicolon
at the beginning of the plug-in to be more secure. •Plug-ins should return a jQuery object, which ensures chainable operations of the plug-in. Unless the plug-in needs to return some quantity that needs to be obtained, such as a string or array, etc.
•Try to use closure techniques to avoid variable name conflicts

Because it is my first time to write a jQuery plug-in, there may be some things I say that are wrong, please forgive me.