Comment créer un plugin d'info-bulle jQuery de base

Publié: 2016-10-22

Si vous avez eu quelque chose à voir avec le développement Web ces derniers temps, vous n'avez guère besoin d'une introduction aux plugins jQuery ou jQuery. En fait, les plugins jQuery sont devenus si populaires que près de 70 % des internautes les utilisent d'une manière ou d'une autre.

Novice ou Pro, quel que soit votre niveau d'expertise en développement Web, jQuery devrait certainement figurer sur votre liste de choses à apprendre et à maîtriser. Dans cet esprit, dans ce tutoriel, nous allons vous apprendre à créer un plugin jQuery Tooltip de base.

Donc, voici ce que nous allons créer :

Apprenant de la capture d'écran de l'aperçu de l'info-bulle jQuery

Sans perdre plus de temps, mettons-nous la main à la pâte avec un codage génial et maîtrisons la création d'un plugin jQuery.

La structure du fichier

  1. jqueryToolTip.css – Feuille de style de l'info-bulle.
  2. jqueryToolTip.js - Le fichier de plugin jQuery réel.

Nous devons nous assurer que notre plugin est suffisamment flexible pour pouvoir servir une variété d'utilisateurs et de configurations d'appareils sans aucun problème. Avant d'aller plus loin, nous allons jeter un œil à quelques règles ou concepts qui nous aideront à y parvenir.

Règles de création d'un plugin jQuery

  1. Gardez les identités uniques - Il est très important d'avoir des noms d' id et class uniques afin qu'au moment de styliser les éléments de votre plugin, vous ne remplaciez pas les styles de page actuels.
  2. Laisser des commentaires en ligne – Laisser des commentaires en ligne est toujours une bonne pratique. Ceci est essentiel lorsqu'il s'agit de plugins jQuery, car les utilisateurs et les programmeurs peuvent avoir du mal à comprendre ce que signifie chaque ligne de code écrite par quelqu'un d'autre, et essayer de déchiffrer le code sans commentaires peut prendre du temps.
  3. Minify Source Code - Comme votre plugin n'est pas la seule chose nécessaire pour créer un site Web, il est important d'utiliser le moins d'espace et de bande passante possible pour l'utilisateur final.

Bien qu'il n'y ait pas de règle rigide pour cela, lors du codage, je m'occupe personnellement de la partie conception avant de rendre mon code fonctionnel. Nous suivrons le même modèle dans ce didacticiel : nous écrirons d'abord le code HTML et CSS requis avant de passer à l'écriture du code pour le plug-in jQuery Tooltip actuel.

Créez un exemple de fichier .html et ajoutez-y le code suivant.

 <div id="jqueryToolTip_wrapper">
    <span class="jqueryToolTip_text">Le texte de l'info-bulle va ici</span>
    <span class="jqueryToolTip_arrow"></span>
</div><!-- fin jqueryToolTip -->

Ouvrez maintenant le fichier jqueryToolTip.css et collez le CSS ci-dessous à l'intérieur.

 #jqueryToolTip_wrapper{
			arrière-plan : aucun répéter le défilement 0 0 rgba(0, 0, 0, 0.8) ;
			rayon de bordure : 4px 4px 4px 4px ;
			-webkit-bordure-rayon : 4px 4px 4px 4px ;
			-moz-bordure-rayon : 4px 4px 4px 4px ;
			couleur : #FFFFFF ;
			taille de police : 12 px ;
			font-weight : gras ;
			hauteur de ligne : normale ;
			rembourrage : 5px ;
			position : absolue ;
			indice z : 999 ;
			famille de polices : Arial, "MS Trebuchet", sans empattement ;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow{
			haut : automatique ;
			bloc de visualisation;
			largeur:0 ;
			hauteur : 0 ;
			bordure : solide 5px ;
			border-color:transparent transparent rgb(0,0,0) transparent;
			border-color:transparent transparent rgba(0,0,0,0.8) transparent;
			position : absolue ;
			haut :-10 px ;
			gauche : 10px
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
			border-color:rgb(0,0,0) transparent transparent transparent;
			border-color:rgba(0,0,0,0.8) transparent transparent transparent;
			haut : automatique ;
			bas :-10px ;
		}

Assurez-vous d'inclure le fichier .css dans votre exemple de fichier .html , puis ouvrez le fichier .html à l'aide d'un navigateur. Si tout se passe bien, vous pourrez voir une belle info-bulle avec une flèche vers le haut assez similaire à l'image ci-dessous.

Capture d'écran de l'aperçu de l'info-bulle jQuery

Info-bulle avec flèche vers le bas

Pour ajouter une flèche vers le bas à la même info-bulle, il vous suffit d'ajouter la classe .arrow_down à la plage avec la classe existante .jqueryToolTip_arrow

Avant de:

 <span class="jqueryToolTip_arrow"></span>

Après:

 <span class="jqueryToolTip_arrow arrow_down"></span>

Conditions

Maintenant que nous en avons terminé avec la partie HTML et CSS, nous pouvons prendre un peu de temps pour comprendre les exigences avant de nous lancer dans l'écriture du code du plugin.

  1. Nous devons savoir quel élément cibler (car nous ne pouvons pas afficher l'info-bulle sur chaque lien d'ancrage).
  2. Nous devons saisir les axes X et Y sur le lien d'ancrage actuel en état de survol.
  3. Enfin, nous devons repositionner notre div d'info-bulle sur le lien d'ancrage actuel en état de survol.

Cela peut sembler compliqué mais les filtres jQuery et les éléments de ciblage CSS rendront notre travail beaucoup plus facile.

Bases des plugins jQuery

Code de conclusion :

 (fonction($){
			$.fn.jqueryToolTip = fonction(toolTipOptions){
			}
			}
		})(jQuery);

Le code ci-dessus est ce que vous devez utiliser chaque fois que vous commencez à créer un plugin à partir de zéro. Ici jqueryToolTip est le nom du plugin et peut être remplacé par ce que vous voulez. Essayez de le garder unique car deux plugins portant le même nom peuvent créer un énorme gâchis.

Paramètres par défaut:

 var toolTipDefaults = {
			position : "en bas"
		},

Selon votre plugin, vous devrez peut-être avoir des paramètres par défaut. Par exemple, dans notre didacticiel, la position est quelque chose dont nous devons nous occuper (c'est-à-dire, si nous voulons afficher l'info-bulle au-dessus de l'élément ou en dessous).

Remplacement des valeurs par défaut :

 toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

Il est toujours recommandé de laisser les utilisateurs finaux remplacer les paramètres par défaut s'ils le souhaitent. Dans notre cas, nous avons défini l'info-bulle en bas par défaut. Désormais, si l'utilisateur final souhaite qu'il soit au premier plan, le code ci-dessus remplacera les paramètres par défaut par les options spécifiées par l'utilisateur final.

En dehors de ce dont nous avons discuté ci-dessus, tout le reste est du code jQuery simple. Donc, nous pouvons maintenant commencer! Ouvrez simplement le fichier jqueryToolTip.js et placez-y le code suivant.

 (fonction($){
			$.fn.jqueryToolTip = fonction(toolTipOptions){
				var toolTipDefaults = {
					position : "en bas"
				},
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- fin jqueryToolTip -->' ;
				$('body').append(toolTipTemplate);
			}
		})(jQuery);

Nous avons créé une variable appelée toolTipTemplate qui va contenir le balisage HTML pour notre jQuery ToolTip Plugin . Par la suite, nous ajouterons le balisage HTML au corps d'une page Web.

 $(this).each(fonction(){
			$(this).hover(fonction(){
				// voici le code des actions qui se produisent après avoir survolé le lien
			});
		});

$(this) est la référence à l'élément qui lancera notre plugin. Chaque fois que le curseur de l'utilisateur final survole l'élément requis, nous afficherons l'info-bulle et remplacerons le texte à l'intérieur par l' attr du titre du lien.

 $(this).each(fonction(){
			// sur la fonction de survol
			$(this).hover(fonction(){
				var toolTipTitle = $(this).attr("title"); // obtenir le titre du lien actuel
				var toTop = $(this).offset().top; // obtenir l'axe Y du lien actuel
				var toLeft = $(this).offset().left; // obtenir l'axe X du lien actuel
				var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // obtenir la hauteur de l'info-bulle
				var itemHeight = $(this).css("height"); // obtenir la hauteur du lien

				if(toolTipSettings.position == 'top')
				{
					$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
					var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
				}
				autre
				{
					var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
				}

				$('.jqueryToolTip_text').html(toolTipTitle); // modification du texte de l'info-bulle par le titre du lien actuel
				$('#jqueryToolTip_wrapper').css("afficher","bloquer"); // définition de l'affichage de l'info-bulle pour bloquer
				$('#jqueryToolTip_wrapper').css({ // définition de l'info-bulle à gauche et en haut à la position actuelle du lien
					haut : hautFinal,
					gauche : à gauche
				});
			},une fonction(){
				$('#jqueryToolTip_wrapper').css("display","aucun"); // masquage de l'info-bulle après le survol
			});
		});

Dans le code ci-dessus, j'ai commenté chaque ligne afin de vous donner une meilleure compréhension de ce que le code donné essaie de faire.

Mettre tous ensemble

 (fonction($){
			$.fn.jqueryToolTip = fonction(toolTipOptions){

				// paramètres par défaut du plugin
				var toolTipDefaults = {
					position : "en bas"
				},

				// extension des paramètres par défaut
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

				// Balisage HTML pour le plug-in d'info-bulle
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- fin jqueryToolTip -->' ;

				// ajout du balisage
				$('body').append(toolTipTemplate);

				$(this).each(fonction(){
					// sur la fonction de survol
					$(this).hover(fonction(){
						var toolTipTitle = $(this).attr("title"); // obtenir le titre du lien actuel
						var toTop = $(this).offset().top; // obtenir l'axe Y du lien actuel
						var toLeft = $(this).offset().left; // obtenir l'axe X du lien actuel
						var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // obtenir la hauteur de l'info-bulle
						var itemHeight = $(this).css("height"); // obtenir la hauteur du lien

						if(toolTipSettings.position == 'top')
						{
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
							var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
						}
						autre
						{
							var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').removeClass('arrow_down');
						}

						$('.jqueryToolTip_text').html(toolTipTitle); // modification du texte de l'info-bulle par le titre du lien actuel
						$('#jqueryToolTip_wrapper').css("afficher","bloquer"); // définition de l'affichage de l'info-bulle pour bloquer
						$('#jqueryToolTip_wrapper').css({ // définition de l'info-bulle à gauche et en haut à la position actuelle du lien
							haut : hautFinal,
							gauche : à gauche
						});
					},une fonction(){
						$('#jqueryToolTip_wrapper').css("display","aucun"); // masquage de l'info-bulle après le survol
					});
				});
		}
		})(jQuery);

Comment appeler le plugin

Appeler notre plugin jqueryToolTip est aussi simple que n'importe quel autre plugin jQuery.

Inclure le fichier JS :

[html type="text/javascript" language="<script"]

<p>Inclure la feuille de style :</p>

 <link rel="stylesheet" href="../Documents/Unzipped/jqueryToolTipPluginTutorial/jqueryToolTipPluginTutorial/jqueryToolTip.css" />

Créez un lien d'ancrage avec l'attribut title :

 <a href="#" title="Démo ToolTip">Démo ToolTip</a>

Appel du plugin (basique):

 <type de script="texte/javascript">
    $(fonction(){
        $('a').jqueryToolTip();
    })
</script>

Appel du plugin (Passing Options):

 <type de script="texte/javascript">
    $(fonction(){
        $('a').jqueryToolTip({
            position : "en haut"
        });
    })
</script>

Achevé!

Capture d'écran de l'aperçu du didacticiel du plug-in jQuery Tooltip

Démo en directTélécharger le code source