So erstellen Sie ein einfaches jQuery-Tooltip-Plugin

Veröffentlicht: 2016-10-22

Wenn Sie in letzter Zeit etwas mit Webentwicklung zu tun hatten, brauchen Sie kaum eine Einführung in jQuery oder jQuery-Plugins . Tatsächlich sind jQuery-Plugins so beliebt geworden, dass fast 70 % des Internets sie auf die eine oder andere Weise nutzen.

Egal, ob Sie Anfänger oder Profi sind, was auch immer Ihre Kenntnisse in der Webentwicklung sein mögen, jQuery sollte definitiv auf Ihrer Liste der Dinge stehen, die Sie lernen und beherrschen sollten. Vor diesem Hintergrund zeigen wir Ihnen in diesem Tutorial, wie Sie ein einfaches jQuery-Tooltip-Plugin erstellen.

Also, das werden wir erstellen:

jQuery-Tooltip-Vorschau-Screenshot Learner

Lassen Sie uns, ohne noch mehr Zeit zu verschwenden, unsere Hände mit etwas fantastischem Codieren schmutzig machen und die Erstellung eines jQuery-Plug-ins meistern.

Die Dateistruktur

  1. jqueryToolTip.css – Stylesheet des Tooltips.
  2. jqueryToolTip.js – Die eigentliche jQuery-Plugin-Datei.

Wir müssen sicherstellen, dass unser Plugin flexibel genug ist, damit es problemlos eine Vielzahl von Benutzern und Gerätekonfigurationen bedienen kann. Bevor wir fortfahren, werfen wir einen Blick auf einige Regeln oder Konzepte, die uns dabei helfen werden, dies zu erreichen.

Regeln zum Erstellen eines jQuery-Plugins

  1. Bewahren Sie eindeutige Identitäten – Es ist sehr wichtig, eindeutige id und class zu haben, damit Sie beim Gestalten Ihrer Plugin-Elemente nicht die aktuellen Seitenstile überschreiben.
  2. Zeilenkommentare hinterlassen – Das Hinterlassen von Zeilenkommentaren ist immer eine gute Praxis. Dies ist beim Umgang mit jQuery-Plugins unerlässlich, da es für Benutzer und Programmierer möglicherweise schwierig ist, herauszufinden, was jede von jemand anderem geschriebene Codezeile bedeutet, und der Versuch, den Code ohne Kommentare zu entschlüsseln, kann zeitaufwändig sein.
  3. Quellcode minimieren – Da Ihr Plugin nicht das einzige ist, was zum Erstellen einer Website erforderlich ist, ist es wichtig, so wenig Speicherplatz und Bandbreite wie möglich für den Endbenutzer zu verwenden.

Obwohl es keine starre Regel dafür gibt, kümmere ich mich beim Codieren persönlich um den Designteil, bevor ich meinen Code funktionsfähig mache. Wir werden in diesem Tutorial dem gleichen Modell folgen: Wir werden zuerst das erforderliche HTML und CSS schreiben, bevor wir den Code für das eigentliche jQuery Tooltip Plugin schreiben .

Erstellen Sie eine .html -Beispieldatei und fügen Sie ihr den folgenden Code hinzu.

 <div id="jqueryToolTip_wrapper">
    <span class="jqueryToolTip_text">Tooltip-Text kommt hier hin </span>
    <span class="jqueryToolTip_arrow"></span>
</div><!-- end jqueryToolTip -->

Öffnen Sie nun die Datei jqueryToolTip.css und fügen Sie das folgende CSS darin ein.

 #jqueryToolTip_wrapper{
			Hintergrund: keine Wiederholung Scroll 0 0 rgba(0, 0, 0, 0.8);
			Randradius: 4px 4px 4px 4px;
			-Webkit-Randradius: 4px 4px 4px 4px;
			-moz-Randradius: 4px 4px 4px 4px;
			Farbe: #FFFFFF;
			Schriftgröße: 12px;
			Schriftdicke: fett;
			Zeilenhöhe: normal;
			Polsterung: 5px;
			Position: absolut;
			Z-Index: 999;
			Schriftfamilie: Arial, "MS Trebuchet", serifenlos;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow{
			oben: automatisch;
			Bildschirmsperre;
			Breite: 0;
			Höhe: 0;
			Rand: solide 5px;
			Randfarbe:transparent transparent rgb(0,0,0) transparent;
			Rahmenfarbe: transparent transparent rgba (0,0,0,0,8) transparent;
			Position: absolut;
			oben:-10px;
			links: 10px
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
			Randfarbe:rgb(0,0,0) transparent transparent transparent;
			Rahmenfarbe: rgba (0,0,0,0,8) transparent transparent transparent;
			oben: automatisch;
			unten:-10px;
		}

Stellen Sie sicher, dass Sie die .css -Datei in Ihre .html -Beispieldatei einfügen, und öffnen Sie dann die .html -Datei mit einem Browser. Wenn alles gut geht, sehen Sie einen gut aussehenden Tooltip mit einem Aufwärtspfeil, der dem unten gezeigten Bild sehr ähnlich ist.

jQuery-Tooltip-Vorschau-Screenshot

QuickInfo mit Pfeil nach unten

Um demselben Tooltip einen Abwärtspfeil hinzuzufügen, müssen Sie lediglich die Klasse .arrow_down zur Spanne mit der vorhandenen Klasse .jqueryToolTip_arrow

Vor:

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

Nach dem:

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

Anforderungen

Jetzt, da wir mit dem HTML- und CSS-Teil fertig sind, können wir uns etwas Zeit nehmen, um die Anforderungen zu verstehen, bevor wir uns tatsächlich damit befassen, den Code für das Plugin zu schreiben.

  1. Wir müssen herausfinden, auf welches Element wir abzielen (da wir den Tooltip nicht für jeden einzelnen Ankerlink anzeigen können).
  2. Wir müssen die X- und Y-Achse auf dem aktuellen Ankerlink im Schwebezustand greifen.
  3. Schließlich müssen wir unser Tooltip- div auf den aktuellen Ankerlink im Hover-Zustand neu positionieren.

Das mag kompliziert erscheinen, aber jQuery-Filter und CSS-Targeting-Elemente werden unsere Arbeit viel einfacher machen.

Grundlagen von jQuery-Plugins

WrapUp-Code:

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

Der oben angegebene Code ist das, was Sie jedes Mal verwenden müssen, wenn Sie ein Plugin von Grund auf neu erstellen. Hier ist jqueryToolTip der Plugin-Name und kann beliebig ersetzt werden. Versuchen Sie, es eindeutig zu halten, da zwei Plugins mit demselben Namen ein riesiges Durcheinander verursachen können.

Standardeinstellungen:

 var toolTipDefaults = {
			Position: "unten"
		},

Abhängig von Ihrem Plugin benötigen Sie möglicherweise einige Standardeinstellungen. In unserem Tutorial müssen wir uns beispielsweise um die Position kümmern (d. h. ob wir den Tooltip über oder unter dem Element anzeigen möchten).

Überschreiben von Standardeinstellungen:

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

Es empfiehlt sich immer, die Endbenutzer die Standardeinstellungen überschreiben zu lassen, wenn sie dies wünschen. In unserem Fall haben wir den Tooltip standardmäßig unten eingestellt. Wenn der Endbenutzer nun möchte, dass es oben angezeigt wird, überschreibt der obige Code die Standardeinstellungen mit den vom Endbenutzer angegebenen Optionen.

Abgesehen von dem, was wir oben besprochen haben, ist alles andere einfacher jQuery-Code. Also, wir können jetzt loslegen! Öffnen Sie einfach die Datei jqueryToolTip.js und platzieren Sie den folgenden Code darin.

 (Funktion($){
			$.fn.jqueryToolTip = function(toolTipOptions){
				var toolTipDefaults = {
					Position: "unten"
				},
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;
				$('body').append(toolTipTemplate);
			}
		})(jQuery);

Wir haben eine Variable namens toolTipTemplate erstellt, die das HTML-Markup für unser jQuery-ToolTip-Plugin enthalten wird. Danach werden wir das HTML-Markup an den Text einer Webseite anhängen.

 $(this).each(function(){
			$(this).hover(function(){
				// Hier kommt der Code für Aktionen, die nach dem Bewegen der Maus über den Link ausgeführt werden
			});
		});

$(this) ist der Verweis auf das Element, das unser Plugin initiiert. Jedes Mal, wenn der Cursor des Endbenutzers über das erforderliche Element schwebt, zeigen wir den Tooltip an und ändern den darin enthaltenen Text in das attr des Links.

 $(this).each(function(){
			// auf Hover-Funktion
			$(this).hover(function(){
				var toolTipTitle = $(this).attr("title"); // Abrufen des aktuellen Linktitels
				var toTop = $(this).offset().top; // Erhalten der aktuellen Link-Y-Achse
				var toLeft = $(this).offset().left; // Aktuelle Link-X-Achse erhalten
				var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // ToolTip-Höhe erhalten
				var itemHeight = $(this).css("height"); // Verbindungshöhe erhalten

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

				$('.jqueryToolTip_text').html(toolTipTitle); // Tooltip-Text in aktuellen Link-Titel ändern
				$('#jqueryToolTip_wrapper').css("display","block"); // Tooltip-Anzeige auf blockieren setzen
				$('#jqueryToolTip_wrapper').css({ // Tooltip links und oben auf die aktuelle Linkposition setzen
					oben: topFinal,
					links: nachLinks
				});
			},Funktion(){
				$('#jqueryToolTip_wrapper').css("display","none"); // Tooltip ausblenden, nachdem der Mauszeiger fertig ist
			});
		});

Im obigen Code habe ich jede einzelne Zeile kommentiert, um Ihnen ein besseres Verständnis dafür zu vermitteln, was der angegebene Code zu tun versucht.

Alles zusammenfügen

 (Funktion($){
			$.fn.jqueryToolTip = function(toolTipOptions){

				// Standardeinstellungen für das Plugin
				var toolTipDefaults = {
					Position: "unten"
				},

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

				// HTML-Markup für Tooltip-Plugin
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;

				// Anhängen des Markups
				$('body').append(toolTipTemplate);

				$(this).each(function(){
					// auf Hover-Funktion
					$(this).hover(function(){
						var toolTipTitle = $(this).attr("title"); // Abrufen des aktuellen Linktitels
						var toTop = $(this).offset().top; // Erhalten der aktuellen Link-Y-Achse
						var toLeft = $(this).offset().left; // Aktuelle Link-X-Achse erhalten
						var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // ToolTip-Höhe erhalten
						var itemHeight = $(this).css("height"); // Verbindungshöhe erhalten

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

						$('.jqueryToolTip_text').html(toolTipTitle); // Tooltip-Text in aktuellen Link-Titel ändern
						$('#jqueryToolTip_wrapper').css("display","block"); // Tooltip-Anzeige auf blockieren setzen
						$('#jqueryToolTip_wrapper').css({ // Tooltip links und oben auf die aktuelle Linkposition setzen
							oben: topFinal,
							links: nachLinks
						});
					},Funktion(){
						$('#jqueryToolTip_wrapper').css("display","none"); // Tooltip ausblenden, nachdem der Mauszeiger fertig ist
					});
				});
		}
		})(jQuery);

So rufen Sie das Plugin auf

Der Aufruf unseres jqueryToolTip- Plugins ist so einfach wie jedes andere jQuery-Plugin.

JS-Datei einbinden:

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

<p>Stylesheet einschließen:</p>

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

Erstellen Sie einen Ankerlink mit Titelattribut:

 <a href="#" title="ToolTip-Demo">ToolTip-Demo</a>

Aufruf des Plugins (Basic):

 <script type="text/javascript">
    $(Funktion(){
        $('a').jqueryToolTip();
    })
</script>

Aufruf des Plugins (Passing Options):

 <script type="text/javascript">
    $(Funktion(){
        $('a').jqueryToolTip({
            Position: "oben"
        });
    })
</script>

Beendet!

Vorschau-Screenshot des jQuery-Tooltip-Plugin-Tutorials

Live-DemoQuellcode herunterladen