Sie können immer noch kein jQuery-Plugin erstellen?

Es ist schwierig. Sie lesen das Tutorial nach dem Tutorial, aber alle gehen davon aus, dass Sie mehr wissen als Sie tatsächlich wissen. Wenn Sie fertig sind, fühlen Sie sich verwirrter als ursprünglich. Warum hat er ein leeres Objekt erstellt? Was bedeutet es, wenn Sie "Optionen" als Parameter übergeben? Was machen "Defaultsettings" eigentlich??

Hab niemals Angst; Ich werde Ihnen auf Wunsch eines treuen Lesers genau zeigen, wie Sie Ihr eigenes "Tooltip" -Plugin erstellen können.




Warum sollte ich überhaupt ein Plugin erstellen??

Es kann hilfreich sein, Plugins auf die gleiche Weise zu betrachten, wie Sie es tun würden. Haben Sie jemals die gleichen Prozeduren wiederholt
für Website für Site? Vielleicht haben Sie ein eigenes Tabbing-System erstellt, das Sie gerne verwenden. Anstatt den gleichen Code Zeit und zu schreiben
Mal wieder, wäre es nicht einfacher, wenn wir Ihren langen Codeblock in eine Zeile umwandeln könnten? Das ist im Wesentlichen das, was ein Plugin für uns tut.
Es ermöglicht die Wiederverwendbarkeit, die von größter Bedeutung ist - wenn Sie Ihren Stundenlohn hoch halten möchten!

Schritt 1: Der Markup

Erstellen Sie ein neues Projekt in Ihrem bevorzugten Code-Editor, und fügen Sie das folgende HTML ein.

      Sie können ein jQuery-Plugin immer noch nicht erstellen?   

Bei der Verwendung von Lorem Ipsum ist die Verteilung von Briefen mehr oder weniger normal, im Gegensatz zu "Inhalt hier, Inhalt hier", so dass es wie lesbares Englisch aussieht. Viele Desktop-Publishing-Pakete und Webseiten-Editoren verwenden jetzt Lorem Ipsum als Standardmodelltext. Durch die Suche nach "Lorem Ipsum" werden viele Websites entdeckt, die noch in den Kinderschuhen stecken. Verschiedene Versionen haben sich im Laufe der Jahre entwickelt, manchmal zufällig, manchmal absichtlich (eingespritzter Humor und dergleichen)..

Erläuterung

Dieser Code ist ziemlich einfach. es braucht also nicht zu viel Überblick.

  • Verweisen Sie auf eine CSS-Datei, die wir in Kürze erstellen werden. Dies ermöglicht es uns, unseren Tooltip zu gestalten.
  • Fügen Sie generischen Text hinzu, der einige Ankertags enthält. Beachten Sie, dass einige von ihnen eine Klasse von "Tooltips" enthalten..
    Das ist wichtig!
  • Importieren Sie jQuery von Google's CDN.
  • Rufen Sie unseren Tooltip mit jQuery auf. Mach dir noch keine Sorgen. Ich erkläre es gleich.

Schritt 2: Plugin aufrufen

Normalerweise finde ich, dass es einfacher ist, mein Plugin zu erstellen, wenn ich zunächst festlege, wie ich es nennen möchte. Betrachten Sie den folgenden Code.

 

Ich habe beschlossen, dass der Name meines Plugins einfach als "Tooltip" bezeichnet werden soll. Ich habe auch festgestellt, dass ich einige davon abgeben möchte
Parameter, um meinen Tooltip leicht anzupassen. Dies ist jedoch für den Benutzer rein optional. Falls gewünscht, könnte er oder sie einfach Folgendes eingeben:

 

In diesem Fall ist die Standard Optionen werden verwendet.

Schritt 3: Plugin erstellen

Nun, da wir wissen, wie das Plugin aufgerufen wird, bauen wir es jetzt auf! Erstellen Sie eine neue Datei in Ihrem Projekt und nennen Sie sie "jQuery.tooltip.js". Beim Erstellen eines Plugins gibt es bestimmte Namenskonventionen, die möglicherweise von anderen verwendet werden. Wir beginnen mit dem Schreiben von 'jQuery', gefolgt vom Namen unseres Plugins. Ich bin mir jedoch sicher, dass Sie feststellen, dass Tausende von Menschen ihr eigenes Tooltip-Plugin erstellt haben. Sie stellen möglicherweise fest, dass es notwendig ist, "tooltip" mit einer eindeutigen Zeichenfolge vorzustellen. vielleicht deine Initialen. Auf jeden Fall ist es nicht so wichtig. Sie können Ihr Plugin beliebig benennen.

JQuery als Parameter übergeben

 (Funktion ($) … Code) (jQuery);

Wir müssen zuerst sicherstellen, dass uns das "$" - Symbol nicht in Schwierigkeiten bringt. Was wäre, wenn wir in unserer Anwendung auch andere Javascript-Bibliotheken verwenden würden? Hast du jemals darüber nachgedacht? In solchen Fällen müssen wir jedes "$" in unserem Dokument in "jQuery" ändern. Das einzige Problem ist, dass dies eine schlampige Lösung ist. Erstellen Sie stattdessen eine selbstaufrufende anonyme Funktion und übergeben Sie "$" als Alias. Auf diese Weise können wir "$" beliebig oft verwenden, ohne sich um Konflikte kümmern zu müssen.

Das Plugin benennen

 $ .fn.tooltip = Funktion (Optionen) 

In unserem Wrap müssen wir unser neues Plugin deklarieren und der folgenden Funktion gleichstellen. Wir können diese Aufgabe durch Eingabe von jQuery.fn (kurz für Prototyp) ausführen..der Name unseres Plugins.

Erinnern Sie sich, als ich angegeben hatte, dass der Benutzer kleine Änderungen an der QuickInfo vornehmen kann? Diese Änderungen werden im Parameter "options" gespeichert.

Festlegen der Standardwerte

 var defaults = background: '# e3e3e3', Farbe: 'schwarz', gerundet: false,

Es ist wahrscheinlich, dass der Benutzer keine Optionen angibt. Also setzen wir unsere eigenen "Standard" -Optionen. Da dies ein Tutorial für Anfänger ist, machen wir hier nicht viel. Meist zeigt dies, was möglich ist. Wir erlauben dem Benutzer, eine Hintergrundfarbe, eine Farbe und die Rundung der QuickInfo auszuwählen.

Wenn wir später in unserem Code auf diese Werte zugreifen möchten, können Sie einfach Folgendes eingeben: Standardeinstellungen.

Zusammenführen der Standardwerte mit den Optionen

Wie können wir also feststellen, ob der Benutzer seine eigenen Optionen hinzufügt? Die Antwort ist, dass wir "Standardwerte" mit "Optionen" zusammenführen müssen..

 Einstellungen = $ .extend (, Standardeinstellungen, Optionen);

Wir haben eine neue Variable mit dem Namen "settings" erstellt und jQuery angewiesen, 'defaults' und 'options' zusammenzuführen und die Ergebnisse in ein neues Objekt einzufügen. Beim Zusammenführen haben die vom Benutzer ausgewählten "Optionen" Vorrang vor den Standardwerten.
Sie fragen sich vielleicht, warum ich vor den Einstellungen nicht "var" hinzugefügt habe. Technisch ist dies nicht erforderlich, obwohl es als bewährte Methode betrachtet wird. Wenn Sie ein wenig nach oben scrollen, werden Sie sehen, dass nach unserem Standardobjekt ein Komma hinzugefügt wurde. Wenn Sie dies tun, können Sie weitere Variablen erstellen, ohne jedes Mal 'var' zu benötigen. Zum Beispiel…

 var joe = ; var ist = ; var good = ;

kann werden…

 var joe = , ist = , gut = ;

Für jeden…

 this.each (function () var $ this = $ (this); var title = this.title;

Es ist wichtig zu wissen, dass das umwickelte Set, das der Benutzer an dieses Plugin übergibt, viele Elemente enthält - nicht nur eines. Wir sollten sicherstellen, dass wir eine für jede Anweisung - oder die Methode "each" von jQuery - verwenden, um den Code zu durchlaufen.

Wir beginnen unsere neue Funktion mit dem Zwischenspeichern von $ (this). Es wird uns nicht nur ein paar Charaktere ersparen, sondern auch die Dinge etwas beschleunigen. Dies ist nicht erforderlich, wird jedoch als gute Praxis betrachtet. Viele Leute fragen: "Warum fügen Sie das Dollarzeichen vor Ihrer Variablen hinzu?". Wir erinnern uns daran, dass wir mit dem jQuery-Objekt arbeiten. Ich erinnere mich daran, dass ich damit Dinge wie $ $ $. Click (); aufrufen kann. Als Nächstes speichere ich den Wert des title-Attributs in einer Variablen namens "title". Sie werden sehen, warum wir dies gleich tun müssen.

Fehlerüberprüfung

 if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (Funktion (e) 

Es ist leicht zu vergessen, worauf sich dies bezieht. Wenn Sie es vergessen, kehren Sie einfach zu der Methode zurück, in der Sie die "Tooltip" -Methode aufrufen.

 $ ('a.tooltip'). tooltip ();

Wir können hier sehen, dass sich $ dieses auf jedes Ankertag bezieht, das eine Klasse von "Tooltip" hat..

Zurück zum Code; Wenn das Element in der umschlossenen Gruppe tatsächlich ein Ankertag ist und das Attribut "title" nicht leer ist, führen Sie Code aus. Das ist ziemlich selbsterklärend. Ich möchte keinen Haufen Code ausführen, wenn der Benutzer versehentlich ein Bild weitergibt. Außerdem möchte ich mein Tooltip-Feld nicht erstellen, wenn nichts angezeigt wird!

In meiner "if" -Anweisung setze ich das "title" -Attribut des Anchor-Tags auf nichts. Dadurch wird das Laden der Standard-QuickInfo des Browsers verhindert. Als Nächstes füge ich einen Ereignis-Listener hinzu, wenn $ this oder der Anker-Tag über den Zeiger gezogen wird. Wenn dies der Fall ist, erstellen wir eine neue Funktion und übergeben das Ereignisobjekt als Parameter. Mach dir jetzt keine Sorgen, das erkläre ich später.

Unser Tooltip erstellen

 var title = $ this.attr ('title'); $ ('
') .appendTo (' body ') .hide () .text (title) .css (backgroundColor: settings.background, color: settings.color, oben: e.pageY + 10, links: e.pageX + 20 ) .fadeIn (350);

Ich habe eine Variable namens "title" erstellt und sie mit dem Wert des Attributs "title" des Ankertags gleichgesetzt. Das ist eigentlich nicht nötig - aber es hilft mir.

Wenn wir unserer jQuery-Anweisung HTML-Tags hinzufügen, können wir tatsächlich ein neues Element erstellen, anstatt eines abzurufen. Wir erstellen ein neues div-Tag mit der ID 'Tooltip'. Als Nächstes werden wir die wunderbaren Veränderungsfähigkeiten von jQuery verwenden, um mühelos eine Reihe von Verfahren auszuführen.

  • .appendTo ('Körper') : Nehmen Sie das gerade erstellte Element und hängen Sie es vor dem schließenden 'body'-Tag an das body-Element an.
  • .verbergen() : Ich möchte, dass unser Tooltip eingeblendet wird. Um diesen Effekt zu erzielen, muss die Anzeige zunächst auf none gesetzt sein.
  • .Text (Titel) : Wir haben unser div-Tag erstellt. aber es ist noch leer. Fügen wir etwas Text hinzu. Wir legen fest, dass das, was im title-Attribut enthalten ist, in diesem div platziert werden soll.
  • .css (…) : Wir setzen die Hintergrundfarbe, die Farbe, die obere und linke Position unserer QuickInfo mit CSS. Erinnern Sie sich früher, als wir die Standardeinstellungen mit den vom Benutzer ausgewählten Optionen in ein neues Einstellungsobjekt zusammengeführt haben? Das wird jetzt ins Spiel kommen. Die Hintergrundfarbe ist gleich 'settings.background'; Die Farbe ist 'settings.color'. Schließlich müssen wir angeben, wo auf der Seite der Tooltip angezeigt werden soll. Wir können das Ereignisobjekt verwenden. Es enthält zwei Eigenschaften mit dem Namen 'pageY' und 'pageX'. Diese enthalten die Werte der genauen Koordinaten der Position des Ankers. Um etwas Abstand hinzuzufügen, fügen wir 10px bzw. 20px hinzu.
  • .fadeIn (350) : Im Verlauf von etwa einer Drittelsekunde wird unser Tooltip eingeblendet.
 if (defaults.rounded) $ ('# tooltip'). addClass ('abgerundet'); 

Standardmäßig ist die Option "gerundet" auf "false" gesetzt. Wenn jedoch 'defaults.rounded' true zurückgibt (was bedeutet, dass der Benutzer diesen Parameter hinzugefügt hat), müssen wir unserer CSS-Datei eine Klasse von 'abgerundet' hinzufügen. Wir werden diese Datei bald erstellen.

Maus raus

 , function () // mouse out $ ('# tooltip'). hide (); );

"Hover" akzeptiert zwei Funktionen: Maus über und Maus heraus. Wir haben den entsprechenden Code hinzugefügt, wenn der Benutzer das ausgewählte Ankertag überfährt. Wir müssen jedoch auch etwas Code schreiben, der die QuickInfo entfernt, sobald die Maus das Ankertag verlassen hat.

Maus bewegen

Es wäre schön, wenn die Tooltip-Box verschoben wird, wenn sich unsere Maus bewegt. Lassen Sie uns das schnell umsetzen.

 $ this.mousemove (Funktion (e) $ ('# tooltip'). css (oben: e.pageY + 10, links: e.pageX + 20););

Wenn sich der Mauszeiger über das Ankertag bewegt, erstellen Sie eine Funktion und übergeben Sie das Ereignisobjekt erneut als Parameter. Suchen Sie das 'Tooltip'-Element und passen Sie dessen CSS an. Sie sollten erkennen, dass es sich um den genauen Code handelt, den wir zuvor geschrieben haben. Wir setzen diese Werte einfach auf die neuen zurück. Nifty, wie??

Erlauben Sie Chaning

Wir müssen dem Benutzer erlauben, die Verkettung fortzusetzen, nachdem er "Tooltip" genannt wurde. Zum Beispiel:

 $ ('a.tooltip'). tooltip (). css (…) .remove ();

Um diese Verkettung zu ermöglichen, müssen wir 'this' zurückgeben. Kurz vor Ihrer schließenden geschweiften Klammer fügen Sie "return this;".

Plugin abgeschlossen!

Sie haben gerade erfolgreich ein voll funktionsfähiges Plugin erstellt. Es ist nicht zu fortgeschritten, aber es erlaubte uns, einige wichtige Funktionen zu überprüfen. Hier ist der endgültige Code.

Letzte jQuery

 (Funktion ($) $ .fn.tooltip = Funktion (Optionen) var defaults = background: '# e3e3e3'), Farbe: 'black', gerundet: false, settings = $ .extend (, default, options); this.each (function () var $ this = $ (this); var title = this.title; if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (Funktion (e) // Maus über $ ('
') .appendTo (' body ') .text (title) .hide () .css (backgroundColor: settings.background, Farbe: settings.color, oben: e.pageY + 10, links: e.pageX + 20 ) .fadeIn (350); if (settings.rounded) $ ('# tooltip'). addClass ('round'); , function () // mouse out $ ('# tooltip'). remove (); ); $ this.mousemove (Funktion (e) $ ('# tooltip'). css (oben: e.pageY + 10, links: e.pageX + 20);); ); // gibt das jQuery-Objekt zurück, um die Verkettbarkeit zu ermöglichen. kehre das zurück; ) (jQuery);

Schritt 4: CSS

Der letzte Schritt besteht darin, nur ein wenig CSS hinzuzufügen, um unseren Tooltip zu verbessern. Erstellen Sie eine neue CSS-Datei mit dem Namen 'default.css' und fügen Sie die folgende Datei ein.

 #tooltip background: # e3e3e3 url (… /images/search.png) no-repeat 5px 50%; Grenze: 1px fest #BFBFBF; Schwimmer: links; Schriftgröße: 12px; Max-Breite: 160px; Polsterung: 1em 1em 1em 3em; Position: absolut;  .gerundeter -moz-border-radius: 3px; -webkit-border-radius: 3px; 

Nichts zu kompliziert hier. Ich beziehe mich auf ein Hintergrundbild, das die Standard-Suchlupe enthält. Gerne können Sie den Quellcode herunterladen, um ihn zu verwenden. Außerdem habe ich ein wenig Abstand hinzugefügt, eine maximale Breite und eine Schriftgröße. Das meiste davon hängt von der Präferenz ab. Sie können es beliebig bearbeiten.

Die einzige lebenswichtige Eigenschaft ist "Position: absolut;". Früher haben wir mit jQuery die Werte "top" und "left" festgelegt. Damit diese Positionierung wirksam wird, müssen wir die Position auf absolut setzen! Das ist wichtig. Wenn Sie dies nicht tun, funktioniert es nicht.

Danke fürs Lesen

An alle, die mich per E-Mail nach diesem Tutorial gefragt haben, hoffe ich, dass es irgendwie geholfen hat. Wenn ich mich nicht gut genug erklärt habe, sollten Sie sich den zugehörigen Screencast ansehen und / oder einen Kommentar fragen. Ich werde versuchen, Ihnen so gut wie möglich zu helfen. Bis zum nächsten Mal…

Bereit für Stufe 2?

Wenn Sie sich mit den in diesem Tutorial vorgestellten Techniken auskennen, können Sie weitermachen! Erwägen Sie die Anmeldung für eine Net Plus-Mitgliedschaft, um ein erweitertes Tutorial von Dan Wellman anzusehen, in dem Sie lernen, wie Sie ein komplizierteres jQuery-Plugin erstellen. Es wird auch ein zugehöriger Screencast mitgeliefert. Melden Sie sich jetzt an!

  • Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.