201001Feb

jQuery-Tutorial: Eigenes Tooltip-Plugin erstellen

Das jQuery-Framework bietet eine sehr gute und einfache Schnittstelle für individuelle Plugins. So finden sich im Netz unzählige Lösungen und Skripte, die bei Projekten viel Arbeit und Zeit sparen können. Dennoch kann die Notwendigkeit oder das Interesse bestehen, ein eigenes Plugin zu entwickeln. In diesem Workshop will ich die Schritte der Plugin-Entwicklung anhand eines simplen Tooltip-Plugins erklären. Zudem soll das Tutorial ein paar neue Funktion von jQuery 1.4 demonstrieren, da die aktuelle Version des JavaScript-Frameworks mit interessanten Features ausgestattet wurde.

jQuery-Plugin - Tooltip

Zur Veranschaulichung, worum es sich bei dem Tooltip-Plugin handelt, folgt hier ein Demo-Link:

Tooltip-Demo

Der Inhalt dieses Tooltips wird aus dem title-Tag des Demo-Links extrahiert. Später werde ich noch eine Variante des Skriptes erstellen, die es ermöglicht, für mehrere Elemente individuelle Inhalte per Parameter festzulegen. So können mit einem einzigen Plugin-Aufruf viele Elemente mit unterschiedlichen Texten und dem Tooltip-Effekt ausgestattet werden.

Der Workshop richtet sich an jQuery-Einsteiger, die schon Erfahrung mit dem Framework gesammelt haben und JavaScript-Kenntnisse besitzen. Für die interaktive Entwicklung des Tutorial-Codes kann JS Bin verwendet werden.

Tooltips werden häufig für Links eingesetzt. Das bestehende HTML-Grundgerüst von JS Bin habe ich daher um folgende Zeilen im body-Bereich erweitert:

  • Quelltext
  • <a href="#" title="Text 1" id="id1" class="link">Link</a>
  • <a href="#" title="Text 2" id="id2" class="link">Link</a>
  • <a href="#" title="Text 3" id="id3" class="link">Link</a>

Zur besseren Darstellung können die Links mit CSS angepasst werden — diese könnten etwa die Navigation einer Website repräsentieren, die durchaus mit Tooltips ausgestattet werden kann.

  • Quelltext
  • a {
  • width:300px;
  • height:80px;
  • margin:40px;
  • background:limegreen;
  • display:block;
  • }

Für den eigentlichen jQuery-Code wird die aktuelle Version 1.4 der Bibliothek benötigt, die sich in JS Bin per Dropdown-Liste einbetten lässt. Der Pfad zur aktuellen jQuery-Version bei Google wäre also:

  • http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Nachdem jQuery eingebettet ist, kann die Entwicklung des Plugins beginnen. In JS Bin kann der komplette Plugin-Code im "JavaScript"-Teil bearbeitet werden — dieser wird per script-Tag im HTML-Dokument platziert und stellt das Äquivalent zu "$(document).ready(...)" dar. Die Plugin-Struktur unterliegt keinen strikten Vorgaben und kann daher aussehen wie folgt.

  • // Struktur 1
  • (function($){
  • $.fn.plugin = function(){
  • // Plugin-Code
  • }
  • })(jQuery);
  •  
  • // Struktur 2
  • $.fn.plugin = function(){
  • // Plugin-Code
  • }
  •  
  • // Struktur 3
  • function plugin(){
  • // Plugin-Code
  • }

Ich werde "Struktur 2" für unser Tooltip-Plugin verwenden. Im Verlauf des Tutorials werden zwei Bereiche entstehen: Der Plugin-Teil und der ausführende Code, mit dem das Plugin aufgerufen und auf die DOM-Elemente angewendet wird. Das Grundgerüst mit den zwei Bereichen würde dann in etwa so aussehen:

  • Quelltext
  • $.fn.tooltip = function(optionen){
  • console.log(optionen.hintergrund);
  • console.log($(this).attr("id"));
  • }
  •  
  • // Plugin-Aufruf
  • $("#id1").tooltip({
  • hintergrund: "#CCCCCC"
  • });

Dem Code habe ich gleich funktionelle Deklarationen hinzugefügt. In Zeile 1 wird der Parameter "optionen" an das Plugin übergeben. Es können beliebig viele Parameter übergeben und verarbeitet werden, was später auch der Fall sein wird. In Zeile 8 ist der erste Wert zu finden, der als Argument übergeben wird. Argumente werden durch "Eigenschaft: Wert" definiert und müssen durch ein Komma getrennt werden. Wie in Arrays darf kein Komma hinter dem letzten Element folgen.
Die Eigenschaft "hintergrund" wird im Plugin-Code also mit "optionen.hintergrund" angesprochen — in Zeile 2 habe ich zu Testzwecken die "console.log()"-Funktion von JS Bin (und Firebug) genutzt, um den Wert von "hintergrund" auszugeben. In Zeile 3 wird die Ausgabefunktion schließlich dafür verwendet, um die ID (id) des referenzierenden DOM-Elements zu ermitteln (in diesem Fall "id1"). Das aufrufende Objekt wird also mit "$(this)" aufgerufen, wobei das Plugin auch mit mehreren Elementen funktionieren soll. Hierzu werden wir später die "each()"-Funktion verwenden.

Im nächsten Schritt werde ich die Standard-Optionen definieren, die das Plugin verwendet, sofern beim Aufruf des Plugins keine Parameter übergeben werden. Die Optionen sind also als "Fallback"-Werte zu verstehen, die durch eigene Argumente überschrieben werden können. Mit "$.extend" werden die Optionen aktiviert und gelten erst durch diesen Befehl als Fallback-Eigenschaften. Der Code lautet nach der Änderung dann:

  • Quelltext
  • $.fn.tooltip = function(optionen){
  • optionen = $.extend({
  • hintergrund: "#000000"
  • }, optionen);
  • }
  •  
  • // Plugin-Aufruf
  • $("#id1").tooltip({
  • hintergrund: "#CCCCCC"
  • });

Der Hintergrund wird also durch den Plugin-Aufruf (Zeile 8) auf "#CCCCCC" eingestellt. Der Fallback-Wert im Plugin wäre "#000000". Sollte also das Tooltip-Plugin ohne die Angabe von "hintergrund" aufgerufen werden, wird die Fallback-Einstellung verwendet.
Später werden noch weitere Eigenschaften hinzukommen. Die "hintergrund"-Eigenschaft legt die Hintergrundfarbe des Tooltips fest und stellt das erste anpassbare Attribut des Plugins dar. Im Prinzip können alle vorhandenen CSS-Eigenschaften des generierten Tooltip-Elements modifiziert und als Optionen ausgewertet werden. Ich werde mich in diesem Workshop auf 5 Eigenschaften beschränken.

Nun entsteht die eigentliche Funktion des Tooltips: Ein div-Container soll eingeblendet werden, sobald der Benutzer den Mauszeiger über das entsprechende DOM-Element bewegt. Der Tooltip-Container kann dynamisch mit jQuery generiert werden. Es gibt für diese Aufgabenstellung nun verschiedene Ansätze und Lösungswege. Ich werde das Plugin in diesem Tutorial so gestalten, dass lediglich ein div-Element generiert und mit dem jeweiligen Text gefüllt wird. Sobald der Mauszeiger das auslösende Element verlassen hat, wird der Tooltip-Container wieder ausgeblendet und aus der HTML-Struktur entfernt.

Innerhalb des Plugin-Bereichs können Funktionen definiert werden. Dies macht dann Sinn, wenn unterschiedliche Parameter und Variablen benötigt werden. Der folgende Code zeigt das Grundgerüst der neu definierten "zeigeTooltip()"-Funktion, die wir später dazu verwenden, um die Tooltips einzublenden.

  • Quelltext
  • $.fn.tooltip = function(optionen){
  • optionen = $.extend({
  • hintergrund: "#000000"
  • }, optionen);
  •  
  • function zeigeTooltip(){
  • $("<div>", {
  • id: "tooltip",
  • css: {
  • background: optionen.hintergrund,
  • display: "none"
  • },
  • html: "Beispieltext"
  • })
  • .appendTo("body")
  • .fadeIn(1000);
  • }
  •  
  • zeigeTooltip();
  • }
  •  
  • // Plugin-Aufruf
  • $("#id1").tooltip({
  • hintergrund: "#CCCCCC"
  • });

Mit diesem Code wird also durch den Plugin-Aufruf ein div-Element mit der Hintergrundfarbe "#CCCCCC" und dem Inhalt "Beispieltext" erstellt, welches dem body-Bereich per "appendTo()" angehängt und innerhalb von 1 Sekunde eingeblendet (fadeIn) wird. Die CSS-Deklaration "display:none" in Zeile 11 versteckt das Element und wird für die "fadeIn()"-Funktion in Zeile 16 benötigt. Die Zeilen 7 bis 14 zeigen eine neue jQuery-Funktion, die mit Version 1.4 eingeführt wurde: Die "Quick Element Construction" ermöglicht das direkte Erstellen von DOM-Elementen, die sofort mit CSS-Eigenschaften und Events belegt werden können. Zum Vergleich hier noch einmal die veraltete Methode (bis jQuery 1.3.2).

  • // jQuery 1.3.2
  • $("<div>")
  • .attr("id", "tooltip")
  • .css({
  • background: optionen.hintergrund,
  • display: "none"
  • })
  • .html("Beispieltext");
  •  
  • // jQuery 1.4
  • $("<div>", {
  • id: "tooltip",
  • css: {
  • background: optionen.hintergrund,
  • display: "none"
  • },
  • html: "Beispieltext"
  • });

Als nächstes wird der generierte Tooltip mit Maus-Ereignissen (Events) verknüpft, so dass er nur dann eingeblendet wird, wenn sich der Mauszeiger über einem Link befindet. Auch für das Zuweisen von mehreren Events wurde die "bind()"-Funktion in jQuery 1.4 erweitert:

  • // jQuery 1.3.2
  • $("element")
  • .mouseenter(function(){
  • // Code
  • })
  • .mouseleave(function(){
  • // Code
  • });
  •  
  • // jQuery 1.4
  • $("element").bind({
  • mouseenter: function(){
  • // Code
  • },
  • mouseleave: function(){
  • // Code
  • }
  • });

Die Maus-Events werde ich nun also mit der oben erstellten "zeigeTooltip()"-Funktion sowie mit einem "fadeOut()"-Befehl versehen. Das sorgt dafür, dass der generierte Tooltip-Container bei "mouseenter" eingeblendet und bei "mouseleave" wieder ausgeblendet wird.

  • Quelltext
  • $.fn.tooltip = function(optionen){
  • optionen = $.extend({
  • hintergrund: "#000000"
  • }, optionen);
  •  
  • function zeigeTooltip(){
  • $("<div>", {
  • id: "tooltip",
  • css: {
  • background: optionen.hintergrund,
  • display: "none"
  • },
  • html: "Beispieltext"
  • })
  • .appendTo("body")
  • .fadeIn(1000);
  • }
  •  
  • $(this).bind({
  • mouseenter: function(){
  • zeigeTooltip();
  • },
  • mouseleave: function(){
  • $("#tooltip").fadeOut(
  • 500,
  • function(){
  • $(this).remove();
  • }
  • );
  • }
  • });
  • }
  •  
  • // Plugin-Aufruf
  • $("#id1").tooltip({
  • hintergrund: "#CCCCCC"
  • });

Der Befehl "$(this).remove();" in Zeile 27 ist eine Callback-Funktion der "fadeOut()"-Animation und wird ausgeführt, sobald die Opazität (opacity) des Tooltips bei "0" angelangt ist (nach 500ms). Anschließend wird das DOM-Element also wieder aus der DOM-Struktur entfernt — so die Theorie. Beim Testen der Maus-Events im Browser lässt sich jedoch feststellen, dass bei schnelleren oder unregelmäßigen Mausbewegungen die Tooltips nicht sauber entfernt werden. Es entstehen überflüssige Tooltip-Container, die zudem nicht mehr ausgeblendet werden. Um das zu verhindern, muss dem "mouseenter"-Ereignis eine Bedingung (Condition) hinzugefügt werden, die überprüft, ob die Opazität des Tooltip-Elements schon den Wert "0" erreicht hat. Befindet sich die "fadeOut"-Animation noch im Gange, soll sie gestoppt und der bestehende Tooltip-Container entfernt werden. Damit ist gewährleistet, dass bei einem erneuten "mouseenter"-Event der vorherige Tooltip aus der DOM-Struktur gelöscht wurde. Hier der entsprechende Teil des Codes, der verändert werden muss:

  • ...
  • $(this).bind({
  • mouseenter: function(){
  • if ($("#tooltip").css("opacity") != 0) {
  • $("#tooltip").stop().remove();
  • }
  •  
  • zeigeTooltip();
  • },
  • ...

Der nächste Schritt sorgt für die korrekte Positionierung des Tooltips. Das eingeblendete Infofeld soll einen bestimmten Abstand zum Mauszeiger haben und den Mausbewegungen des Benutzers folgen. In JavaScript werden Maus-Koordinaten (X, Y) über Parameter abgefragt, die in Verbindung mit einem Maus-Event stehen müssen. Neben den Ereignissen "mouseenter" (oder "mouseover") und "mouseleave" (oder "mouseout") gibt es noch das "mousemove"-Event, das bei jeder Mausbewegung reagiert. Dieses Event wird gleich für die Mausverfolgung genutzt. Die beiden entscheidenden Parameter für die Koordinaten sind die Eigenschaften "pageX" und "pageY". Im folgenden Code-Snippet definiere ich in der "zeigeTooltip()"-Funktion noch die CSS-Eigenschaften "position", "top" und "left" — erst mit der CSS-Deklaration "position:absolute;" wird der Tooltip-Container zu einem "schwebenden Element", da seine Position absolut zum body-Element (also dem Elternelement) ausgerichtet wird.

  • Quelltext
  • $.fn.tooltip = function(optionen){
  • optionen = $.extend({
  • hintergrund: "#000000"
  • }, optionen);
  •  
  • function zeigeTooltip(evt){
  • $("<div>", {
  • id: "tooltip",
  • css: {
  • position: "absolute",
  • left: evt.pageX + 20,
  • top: evt.pageY + 20,
  • background: optionen.hintergrund,
  • display: "none"
  • },
  • html: "Beispieltext"
  • })
  • .appendTo("body")
  • .fadeIn(1000);
  • }
  •  
  • $(this).bind({
  • mouseenter: function(evt){
  • if ($("#tooltip").css("opacity") != 0) {
  • $("#tooltip").stop().remove();
  • }
  •  
  • zeigeTooltip(evt);
  • },
  • mouseleave: function(){
  • $("#tooltip").fadeOut(
  • 500,
  • function(){
  • $(this).remove();
  • }
  • );
  • },
  • mousemove: function(evt){
  • $("#tooltip").css({
  • left: evt.pageX + 20,
  • top: evt.pageY + 20
  • });
  • }
  • });
  • }
  •  
  • // Plugin-Aufruf
  • $("#id1").tooltip({
  • hintergrund: "#CCCCCC"
  • });

In den Zeilen 11, 12, 41 und 42 werden dem Tooltip-Container die Maus-Koordinaten plus einem Abstand von 20 Pixeln (Offset) zugewiesen. Die Koordinaten müssen wie erwähnt durch ein Maus-Event übermittelt werden, das in diesem Fall mit dem Parameter "evt" geschieht. Der Parameter muss auch den gewünschten Maus-Ereignissen (hier in Zeile 23 und 38) sowie der "zeigeTooltip()"-Funktion in Zeile 6 zugeteilt werden.
Unser Tooltip-Plugin funktioniert schon jetzt und benötigt neben CSS-Attributen noch zwei letzte Ergänzungen. Zum einen soll der Tooltip auch für mehrere Elemente funktionieren, weshalb die "each()"-Funktion an folgender Stelle ergänzt werden muss (der komplette Skript-Code folgt weiter unten):

  • ...
  • $(this).each(function(){
  • $(this).bind({
  • mouseenter: function(evt){
  • if ($("#tooltip").css("opacity") == 0) {
  • ...

Zum anderen wollen wir in dieser Variante den title-Text des Link-Elements als Tooltip-Text nutzen. Dies kann über folgenden Code erreicht werden:

  • ...
  • $(this).each(function(){
  • var inhalt = $(this).attr("title");
  • $(this).attr("title", "");
  • $(this).bind({
  • ...

Hier wird zuerst der title-Text in die Variable "inhalt" geschrieben und anschließend vom DOM-Element entfernt, so dass er nicht über dem Tooltip angezeigt wird.
Schließlich kann das Aussehen des Tooltips noch erweitert werden. Dazu habe ich 4 weitere Eigenschaften an die Optionen übergeben:

  • $.fn.tooltip = function(optionen){
  • optionen = $.extend({
  • hintergrund: "#000000"
  • schriftfarbe: "#FFFFFF",
  • rand: "2px #ABABAB solid",
  • eckenradius: 10,
  • zeit: 300
  • }, optionen);
  • ...

Diese Optionen müssen an den entsprechenden Stellen im Plugin-Code deklariert werden. Mit den finalen CSS-Attributen sieht der komplette Plugin-Code des Tooltips so aus:

  • Quelltext
  • $.fn.tooltip = function(optionen){
  • optionen = $.extend({
  • hintergrund: "#000000",
  • schriftfarbe: "#FFFFFF",
  • rand: "2px #ABABAB solid",
  • eckenradius: 10,
  • zeit: 300
  • }, optionen);
  •  
  • function zeigeTooltip(evt, zeit, inhalt){
  • $("<div>", {
  • id: "tooltip",
  • css: {
  • position: "absolute",
  • left: evt.pageX + 20,
  • top: evt.pageY + 20,
  • padding: "10px",
  • background: optionen.hintergrund,
  • color: optionen.schriftfarbe,
  • fontFamily: "Tahoma, Helvetica, sans-serif",
  • fontSize: "12px",
  • border: optionen.rand,
  • display: "none",
  • "-moz-border-radius": optionen.eckenradius,
  • "-webkit-border-radius": optionen.eckenradius
  • },
  • html: inhalt
  • })
  • .appendTo("body")
  • .fadeIn(zeit);
  • }
  •  
  • $(this).each(function(){
  • var inhalt = $(this).attr("title");
  • $(this).attr("title", "");
  • $(this).bind({
  • mouseenter: function(evt){
  • if ($("#tooltip").css("opacity") != 0) {
  • $("#tooltip").stop().remove();
  • }
  •  
  • zeigeTooltip(evt, optionen.zeit, inhalt);
  • },
  • mouseleave: function(){
  • $("#tooltip").fadeOut(
  • optionen.zeit,
  • function(){
  • $(this).remove();
  • }
  • );
  • },
  • mousemove: function(evt){
  • $("#tooltip").css({
  • left: evt.pageX + 20,
  • top: evt.pageY + 20
  • });
  • }
  • });
  • });
  • }

Der Aufruf der "zeigeTooltip()"-Funktion wird also mit Options-Parametern bestückt. Die beiden CSS-Attribute für abgerundete Ecken werden von allen Versionen des Internet Explorers ignoriert — bis die CSS3-Eigenschaft "border-radius" in Version 9 des Microsoft-Browsers integriert ist, wird noch eine Zeit vergehen. Bis dahin kann natürlich auch das HTC-Skript für runde Ecken verwendet werden.

Schließlich können nun auch mehrere Links mit dem Tooltip-Plugin und weiteren Optionen versehen werden. Der Plugin-Aufruf könnte dann so aussehen:

  • Quelltext
  • $(".link").tooltip({
  • hintergrund: "#CCCCCC",
  • schriftfarbe: "#000000",
  • rand: "4px #DFDFDF solid",
  • eckenradius: 8,
  • zeit: 400
  • });

Die hier gezeigte Plugin-Konfiguration erstellt also Tooltips, die sich dem Inhalt (title-Text) dynamisch anpassen. Der Kreativität sind bei den Einstellungen des Plugins keine Grenzen gesetzt und so stellt dieser Code lediglich eine Basis-Struktur dar.

Damit wäre die Entwicklung von Variante 1 des Plugins abgeschlossen. Im folgenden Teil will ich noch eine zweite Variante vorstellen, mit der sich auch HTML-Inhalte für die Tooltips festlegen lassen — dies ist mit bloßen title-Tags nicht möglich. Zudem wollte ich einen Weg finden, mit dem es durch einen einzigen Plugin-Aufruf möglich wird, mehrere Texte bei einem gleichbleibenden Tooltip-Stil zu erstellen.

Die zweite Version des Skriptes kann durch 5 kleine Änderungen am bestehenden Plugin-Code realisiert werden. Der problematische Punkt bei der Aufgabenstellung stellt jedoch der eigentliche Plugin-Aufruf dar, denn an dieser Stelle sollen mehrere Texte und IDs übergeben werden. Ein Lösungsansatz hierfür wäre ein Objekt-Array, wie er beispielsweise in JSON verwendet wird. Das Array kann so als zweiter Parameter an die Tooltip-Funktion übergeben und dort weiter verarbeitet werden. In meiner Variante werde ich die die ID (id-Attribut) des aufrufenden Elements als Anker verwenden. Der Plugin-Aufruf würde dann so aussehen:

  • Quelltext
  • $(".link").tooltip({
  • hintergrund: "#CCCCCC",
  • schriftfarbe: "#000000",
  • rand: "4px #DFDFDF solid",
  • eckenradius: 8,
  • zeit: 400
  • }, {
  • "inhalt": [{
  • "id1": "<strong>Text 1</strong>",
  • "id2": "<p>Text 2</p>",
  • "id3": $("#id3").attr("title")
  • }]
  • });

Das Array "inhalt" in Zeile 8 enthält also alle Tooltip-Inhalte, die den IDs zugewiesen werden sollen. In Zeile 11 ist zu sehen, dass trotzdem der entsprechende title-Text als Tooltip-Inhalt verwendet werden kann. Zu beachten bei dieser Technik ist das Array-Name "inhalt", der bestehen bleiben muss, sowie das fehlende Raute-Zeichen (#) vor dem ID-Namen.
Der Klassen-Selektor in Zeile 1 ist zudem nicht zwingend erforderlich. Alternativ könnten auch die IDs verwendet werden:

  • $("#id1, #id2, #id3").tooltip({
  • ...

Um den Array nun im Plugin-Code verarbeiten zu können, sind wie oben erwähnt 5 Änderungen notwendig. Es werden hauptsächlich die Funktionsparameter geändert, da nun die ID und nicht mehr der title-Text übergeben wird.

  • $.fn.tooltip = function(optionen, inhalt){
  • ...
  • function zeigeTooltip(evt, zeit, id){
  • ...
  • html: inhalt["inhalt"][0][id]
  • ...
  • var id = $(this).attr("id");
  • ...
  • zeigeTooltip(evt, optionen.zeit, id);
  • ...

Wichtig ist vor allem die dritte Änderung, da hier der Inhalt der zugewiesenen ID übergeben wird. Der komplette Code sieht dann aus wie folgt:

  • Quelltext
  • $.fn.tooltip = function(optionen, inhalt){
  • optionen = $.extend({
  • hintergrund: "#000000",
  • schriftfarbe: "#FFFFFF",
  • rand: "2px #ABABAB solid",
  • eckenradius: 10,
  • zeit: 300
  • }, optionen);
  •  
  • function zeigeTooltip(evt, zeit, id){
  • $("<div>", {
  • id: "tooltip",
  • css: {
  • position: "absolute",
  • left: evt.pageX + 20,
  • top: evt.pageY + 20,
  • padding: "10px",
  • background: optionen.hintergrund,
  • color: optionen.schriftfarbe,
  • fontFamily: "Tahoma, Helvetica, sans-serif",
  • fontSize: "12px",
  • border: optionen.rand,
  • display: "none",
  • "-moz-border-radius": optionen.eckenradius,
  • "-webkit-border-radius": optionen.eckenradius
  • },
  • html: inhalt["inhalt"][0][id]
  • })
  • .appendTo("body")
  • .fadeIn(zeit);
  • }
  •  
  • $(this).each(function(){
  • var id = $(this).attr("id");
  • $(this).attr("title", "");
  • $(this).bind({
  • mouseenter: function(evt){
  • if ($("#tooltip").css("opacity") != 0) {
  • $("#tooltip").stop().remove();
  • }
  •  
  • zeigeTooltip(evt, optionen.zeit, id);
  • },
  • mouseleave: function(){
  • $("#tooltip").fadeOut(
  • optionen.zeit,
  • function(){
  • $(this).remove();
  • }
  • );
  • },
  • mousemove: function(evt){
  • $("#tooltip").css({
  • left: evt.pageX + 20,
  • top: evt.pageY + 20
  • });
  • }
  • });
  • });
  • }
  •  
  • // Plugin-Aufruf
  • $(".link").tooltip({
  • hintergrund: "#CCCCCC",
  • schriftfarbe: "#000000",
  • rand: "4px #DFDFDF solid",
  • eckenradius: 8,
  • zeit: 400
  • }, {
  • "inhalt": [{
  • "id1": "<strong>Text 1</strong>",
  • "id2": "<p>Text 2</p>",
  • "id3": $("#id3").attr("title")
  • }]
  • });

Der Parameter "inhalt" wird in diesem Fall nicht mit "$.extend" verarbeitet, sondern lediglich ausgelesen.

Ich hoffe, der Workshop konnte einen Einblick in die Plugin-Entwicklung mit jQuery vermitteln. Die Architektur des Frameworks ist komfortabel und zudem gut dokumentiert, so dass recht schnell gute Ergebnisse erzielt werden können. Man darf in Zukunft sicherlich noch weitere Verbesserungen und innovative Ideen von den jQuery-Entwicklern erwarten, da auch JavaScript weiterentwickelt und in modernen Browser integriert wird.

Die beiden JavaScript-Dateien des Plugins können hier heruntergeladen werden. Viel Spaß damit!