Comment créer des plugins avec le framework jQuery

jQuery nous donne beaucoup de flexibilité pour écrire du code et il est si simple qu'il peut être utilisé même avec peu de connaissances et nous pouvons réaliser de gros projets en économisant beaucoup de temps.
Une des possibilités de Jquery est qu'il nous permet de l'étendre afin de créer de nouvelles fonctions dans ce framework. C'est une bonne idée de choisir de développer des plugins très utiles pour nos applications web et de pouvoir ensuite les réutiliser ou les partager avec la communauté.
Développer un plugin Jquery
La structure de base d'un plugin est la suivante

 jQuery.fn.extend ({[b] miplugin [/ b] : fonction ([b] paramètre [/ b]) {// plugin code}}); 

Les paramètres sont facultatifs. Nous allons créer quelques exemples pour comprendre comment un plugin est programmé
Plugin qui renvoie un message si un bouton, une zone de texte, un lien, etc. a été cliqué.
Nous écrivons le code suivant dans un fichier plugin.js

 jQuery.fn.extend ({send : fonction (message) {// je définis la fonction d'envoi et le paramètre de message $ (this) .click (function () {// si la fonction a été activée par une alerte clic (message)); // affiche le message});}});

Nous créons une structure ou une page html qui contient un bouton par exemple envoyer

 // on invoque la librairie jquery // on invoque le pluginEnvoyer

Nous sauvegardons le html et lorsque nous l'exécutons depuis le navigateur nous cliquons sur le bouton et nous verrons que la fonction jquery affiche un message.

On crée un autre plugin qui peut être dans le même fichier js ou dans un autre si on veut des plugins séparés.
Dans ce cas il s'agira de modifier l'aspect css d'un bouton lorsqu'on l'appuie, on changera la couleur du texte et du fond.

 jQuery.fn.extend ({changer l'arrière-plan : fonction (arrière-plan, texte) {// fonction et paramètres $ (ceci) .click (fonction () {// si accessible à partir d'un clic jQuery (ceci) .css ("fond- color ", background); // change la couleur du fond jQuery (this) .css (" color ", text); // change la couleur du texte});}}); 

Ensuite il faut écrire le code html de l'élément dans ce cas un bouton dont l'id sera en arrière plan

Changer de couleur

Il faut aussi initier la fonction, on se retrouverait avec les deux fonctions

En cliquant sur le bouton de changement de couleur, nous voyons que les modifications CSS sont appliquées.

En ce sens, nous pouvons apporter des modifications et attribuer des fonctionnalités à n'importe quel élément html, par exemple en html, nous créons un div vide avec l'identifiant du message :

Ensuite, dans le plugin d'envoi, nous changeons

alerte (message)

par le code suivant qui publiera un message à l'intérieur du div en appuyant sur le bouton

 $ ("# message"). html ("Données envoyées"); 

En cliquant sur le bouton soumettre au lieu de la boîte de dialogue, le message est maintenant écrit dans le div.

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif