Share
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.
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!
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)..
Dieser Code ist ziemlich einfach. es braucht also nicht zu viel Überblick.
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.
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.
(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.
$ .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.
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.
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 = ;
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.
Accentsconagua
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.
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.
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.
, 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.
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??
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;".
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.
(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); 
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.
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…
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!
