jQuery Plugins schreiben: $.widget und die Sache läuft!

Verfasst von Julian Pustkuchen am 28. November 2013 - 9:38

Ihr möchtet ein individuelles jQuery JavaScript Plugin schreiben, das auf DOM Elemente Anwendung findet und sich verhält, wie man es von jQuery positiv gewohnt ist?

Keine einfache Sache, wenn man alles selbst - und richtig - machen will. Erstklassige Unterstützung bietet $.widget mit seiner vordefinierten Funktionalität.

Anstatt selbst einen "prototype" komplex mit Optionen, privaten und öffentlichen Funktionen zu versehen, nutzt ihr $.widget.
Dies ermöglicht die Verwendung vordefinierter Definitionen, wie

Ein Optionen-Objekt, das bei der Instanziierung problemlos überschrieben und erweitert werden kann, ohne manuell $.extend zu benötigen.
Private Funktionen, um interne Hilfsfunktionen abzudecken
Öffentliche Funktionen, um zusätzliche Aufrufe auf dem Objekt zu ermöglichen
Einen Konstruktor
Einen Destruktor
... und weitere "Magie"!

Alles, wie man es z.B. von den jQuery UI Plugins kennt. Konsistenz gesichert, ein Traum!

Mehr zu erfahren gibt es im Tutorial unter:
http://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/

Noch ein Tipp

Um auf öffentliche Funktionen des Widgets zuzugreifen, wird einfach der Funktionsname als erster Parameter und die weiteren Parameter der Funktion als Folgeparameter an das Widget-Objekt selbst übergeben.
Beispiel:

// Eure öffentliche Funktion heißt "foo", dann lautet der Aufruf:
jQuery('#xyz').myWidget(); // Init
jQuery('#xyz').myWidget('foo', 'par1', 123, 'yzz'); // Öffentliche Funktion aufrufen!
<javascript>

Einordnung:

Kommentare

Kommentar hinzufügen

Julian Pustkuchen, M. Sc. Wirtschaftsinformatik ist passionierter Software- & Webentwickler mit den Schwerpunkten Softwaredesign, Objektorientierung sowie Usability- & Ablaufoptimierung bei webks. Ein weiterer Schwerpunkt ist die Entwicklung im CMS Drupal.