Partager un plug-in de pagination jQuery auto-écrit_jquery

J'ai besoin d'un plug-in de pagination JS pour travailler, et j'ai pensé à en écrire un moi-même. Je suis allé en ligne et j'en ai trouvé un dont je ne connaissais pas la structure du code, et il était difficile de résoudre le problème. les plug-ins sur Internet contenaient trop de fonctions, et certains d'entre eux n'étaient pas du tout utiles. Ensuite, il n'est pas nécessaire de charger ce morceau de JS. Deuxièmement, je me suis souvenu que je n'avais jamais écrit de plug-in jQuery, alors je viens de m'entraîner. D'accord, regardons d'abord les résultats :

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

Parlons brièvement des fonctions implémentées par ce plug-in

L'arrière-plan affichera tout le contenu interrogé sur la page. Ce plug-in doit contrôler le contenu afin qu'il puisse être affiché page par page. Il existe des fonctions de page précédente, de page suivante, de page d'accueil et de dernière page. Sur la première page, la page précédente et la page d'accueil doivent être masquées. Sur la dernière page, la dernière page et la page suivante doivent être masquées. Seuls quelques boutons sont affichés à la fois, et lorsque le dernier bouton est cliqué, les suivants sont affichés.

Parlons brièvement du processus d'encodage :

Tout d'abord, vous pouvez écrire hardiment le code suivant :

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

Ce code devrait être familier à tout le monde. Il s'agit de la fonctionnalité divine de JavaScript : la fermeture. C'est également une structure courante pour les plugins jQuery. Pourquoi utiliser des fermetures pour créer cette structure commune de jQuery ? D'une part, cela peut éviter que les variables temporaires internes n'affectent l'espace global, et vous pouvez continuer à utiliser $ comme alias pour jQuery dans le plug-in.

L'étape suivante consiste à écrire vos propres méthodes dans cette structure. jQuery propose deux façons d'étendre les méthodes dans jQuery. Ouvrez l'API jQuery et recherchez le mécanisme du plug-in. Vous pouvez voir deux méthodes

• jQuery.extend(object) étend l'objet jQuery lui-même. Utilisé pour ajouter de nouvelles fonctions à l'espace de noms jQuery.
• jQuery.fn.extend(object) étend l'ensemble d'éléments jQuery pour fournir de nouvelles méthodes (généralement utilisées pour créer des plug-ins).
D'après ce qui précède, nous pouvons voir que jQuery.extend(object) étend jQuery lui-même. Du point de vue des langages tels que Java ou C#, cela équivaut à ajouter une méthode statique à jQuery. Par exemple, on écrit ainsi :

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

De cette façon, cela équivaut à ajouter une méthode max à l'objet jQuery. Lors de l'appel, vous pouvez l'appeler comme ceci : jQuery.max()

Alors, qu'est-ce que jQuery.fn ? Ouvrez le code source de jQuery et vous pouvez voir jQuery.fn = jQuery.prototype. Ensuite, jQuery.fn.extend équivaut à l'ajout d'une fonction membre dans jQuery.

Vous devriez maintenant comprendre la différence entre les deux. La méthode statique peut être appelée directement, jQuery.max(). Les fonctions membres ne peuvent être appelées que par des instances jQuery, telles que jQuery("#my").max().

Ici, j'utilise la méthode jQuery.extend. Le code est le suivant :

;(
 function($){
  $.extend({
   "easypage":function(options){
   options = $.extend({//参数设置
   contentclass:"contentlist",//要显示的内容的class
   navigateid:"navigatediv",//导航按钮所在的容器的id
   everycount:"5",//每页显示多少个
   navigatecount:"5"//导航按钮一次显示多少个
   }, options); 
}); 

Easypage est le nom de la méthode utilisée par le plug-in de pagination, et contentclass, navigationid, eachcount et navigationcount sont des paramètres.

Le cadre de base a été mis en place et la prochaine étape consiste à compléter les fonctions.

La première chose est de trouver le contenu à paginer et de générer des boutons de navigation. Le code est le suivant :

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) 

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

L'étape suivante consiste à implémenter quelques fonctions de base. Nous en extrayons ici deux à afficher

//隐藏所有的导航按钮
$.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, le flux de code de base est comme ceci. Le code source du programme est dans la pièce jointe, et l'implémentation spécifique de la fonction a été expliquée assez clairement dans les commentaires du code source. Si vous avez encore des questions sur les fermetures, vous pouvez consulter mon précédent blog pour parler des fermetures JavaScript.

Ce qui suit résume les points de base du plug-in jQuery Haha, il est extrait de Sharp jQuery.

•Le nom de fichier recommandé du plug-in est jquery.[nom du plug-in].js, tel que jquery.color.js
• Toutes les méthodes objets doivent être attachées à l'objet jQuery.fn et toutes les fonctions globales doivent être attachées à l'objet jQuery lui-même

•À l'intérieur du plug-in, cela pointe vers l'objet jQuery actuellement obtenu via le sélecteur, contrairement à la méthode générale, comme la méthode click(), où l'interne this pointe vers l'élément DOM

•Vous pouvez parcourir tous les éléments à travers this.each
•Tous les plug-ins de méthodes ou de fonctions doivent se terminer par un point-virgule, sinon des problèmes peuvent survenir lors de la compression. Certains ajoutent un point-virgule
au début du plug-in pour plus de sécurité. • Les plug-ins doivent renvoyer un objet jQuery, qui garantit les opérations chaînables du plug-in. Sauf si le plug-in doit renvoyer une quantité qui doit être obtenue, comme une chaîne ou un tableau, etc.
•Essayez d'utiliser des techniques de fermeture pour éviter les conflits de noms de variables

Parce que c'est la première fois que j'écris un plug-in jQuery, il peut y avoir certaines choses qui ne vont pas, veuillez me pardonner.