In unserem Fall hat eines der von uns gewählten Plugins – Sortable – keinen eigenen CSS-Code. Diskussion Egal ob Sie JavaScript oder CSS nutzen – es gibt immer Kompromisse zwischen einer einzelnen, großen Datei und vielen kleineren Includes. Es gibt nicht immer eine eindeutige Entscheidung wie: »Nutzen Sie einzelne Plugin-Dateien bei der Entwicklung und eine große Datei in der produktiven Umgebung.« So kann es zum Beispiel in der Entwicklung einfacher sein, auf die gesamte Suite zu verweisen, weil die Performance kein großes Thema ist. In der produktiven Umgebung sollten aber möglicherweise nur die notwendigen Dateien eingebunden werden, damit der Umfang der zu ladenden Daten möglichst klein ist. Zu Debugging-Zwecken kann es andererseitsvon Vorteil sein, während der Entwicklung eine Skript- und CSS-Referenz auf jede Plugin-Datei zu haben, während in der produktiven Umgebung die AJAX Libraries API von Google und der Cache des Anwender-Computers genutzt werden, um die zu übertragenden Datenmengen zu reduzieren, selbst wenn die Datei Funktionen enthält, die niemals verwendet werden. Das ideale Setup hängt von Ihrer Architektur, der Anzahl und Art der verwendeten Plugins und den spezifischen Anforderungen Ihrer Entwicklungs- und produktiven Umgebungen ab.
14.4. Ein jQuery UI-Plugin mit den Standard-Optionen initialisieren Problem Sie wollen ein jQuery UI-Plugin so schnell und einfach wie möglich einsetzen und dabei auch die vorgegebenen Standard-Optionen nutzen. Lösung Alle jQuery UI-Plugins werden wie klassische jQuery-Plugins aufgerufen. Wenn Sie also ein Set mit Elementen selektiert haben, rufen Sie einfach den Plugin-Namen als Funktion des jQuery-Objekts auf:
Diskussion Da es bei JavaScript auf Groß- und Kleinschreibung ankommt, müssen Sie bei den Namen der jQuery UI-Plugins aufpassen. Alle jQuery UI-Plugins beginnen mit einem Kleinbuchstaben und bestehen – wie die jQuery API – meist nur aus einem Wort. Wird mehr als ein Wort benötigt, dann beginnt jedes folgende mit einem Großbuchstaben. Es gibt momentan keine jQuery UI-Plugins mit mehr als einem Wort, daher hier ein ausgedachtes Beispiel: $('p.long').succinct();
$('.short').longerPluginName(); Das initialisierte Element erhält die Klasse ui-pluginname . So sieht zum Beispiel der HTML-Inhalt vor und nach dem Aufruf von $('div').draggable(); aus:
Ein einfaches DIV
Ein einfaches DIV
Es gibt ein paar Ausnahmen zu dieser Regel. Das Element, für das Sie .dialog() aufrufen, erhält die Klasse ui-dialog-content und wird in ein generiertes Element mit der Klasse ui-dialog eingebettet. Eine weitere Ausnahme sehen Sie beim Aufruf von .datepicker() für ein Texteingabefeld. Nicht das Formfeld erhält die Klasse ui-datepicker , sondern das
, das angezeigt wird, wenn das Eingabefeld den Fokus erhält. Hier ein paar Dinge, die Sie beim Initialisieren eines jQuery UI-Plugins beachten sollten: Wenn Sie die Methode init eines jQuery UI-Plugins für ein Set mit mehr als einem Element aufrufen, wird sie für jedes Element einzeln aufgerufen. Die folgende Codezeile $('img').draggable();
entspricht also: $('img').each(function() { $(this).draggable(); }); Jedes DOMElement kann von jedem jQuery UI-Plugin nur einmal initialisiert werden. Alle weiteren Aufrufe von init – egal ob mit angegebenen Optionen oder nicht – werden ignoriert. Weiter hinten in diesem Kapitel finden Sie Rezepte, wie Sie Optionen nach dem Aufruf von init noch ändern können, aber auch, wie Sie ein Plugin zerstören, wodurch ein init »zurückgerollt« wird. Wenn Sie wirklich wollen, können Sie danach auch wieder init aufrufen. Alle Optionen sind optional. Sie können ein jQuery UI-Plugin immer problemlos initialisieren, indem Sie einfach die Methode mit dem Plugin-Namen aufrufen. Das ist nicht nur gefahrlos möglich, es sollte auch noch ausgesprochen nützlich sein, denn jedes Plugin enthält die am häufigsten genutzten Optionen als Standard-Vorgaben. Sind Sie damit nicht glücklich, dann sollten Sie einen Blick auf die nächsten beiden Rezepte werfen.
14.5. Ein jQuery UI-Plugin mit eigenen Optionen initialisieren Problem Sie wollen ein jQuery UI-Plugin nutzen, aber andere Optionen
Kostenlos Online Lesen 
