Zum Ende des Wochenendes noch ein kleiner und wahrscheinlich für erfahrene Programmierer bereits bekannter Kniff zu meinem Lieblingsframework jQuery.
Viele kennen das Problem: Man betreibt eine Seite mit vielen unterschiedlichen jQuery-Plugins oder möchte der Übersichtlichkeit halber seinen Code in mehrere Dateien auslagern. Nun ist jedoch oft der Fall, dass man so manches Plugin oder Script nur auf einigen Unterseiten benötigt. Je nach Seitengröße und Masse des Quelltextes kippt man dem Besucher also oft Dateien auf den Ladebalken, die er in vielen Fällen wahrscheinlich gar nicht braucht. Man kann die Einbindung der einzelnen Dateien natürlich auch Serverseitig über IF-Abfragen steuern, dass ist jedoch ziemlich unflexibel und mühselig.
Nun bin ich heute über die jQuery-Funktion getScript gestolpert. Die Funktion kann aus dem Code heraus an jeder beliebigen Stelle also zusätzliche JavaScript-Dateien abrufen und parsen. Es ist somit unter anderem möglich beim auftreten eines bestimmten Selektors (und nur dann) ein angelegtes Plugin einzubinden.
In der Praxis könnte das also z.B. so aussehen:
if($("div#accordion").length){
$.getScript("/js/plugins/jquery.accordion.js");
}
Mit length überprüfen wir einfach ob der beschriebene Selektor irgendwo im DOM vorkommt, wenn ja wird das Plugin geladen und ausgeführt.
Für viele wohl nichts Neues, aber für Einsteiger vielleicht Hilfreich.
So, nach langer Zeit mal wieder ein Beitrag aus meiner Praxiserfahrung mit jQuery.
Seit gestern verziert die Sidebar dieses Weblogs nun auch mein Flickr-Stream, der über den wohl vielen Flickr-Nutzern bekannten Badge-Generator erzeugt wird. Hierbei wird über ein kleines JavaScript eine Liste der zuletzt veröffentlichten Fotos aus dem eigenen Flickr-Profil ausgegeben, nach einem Klick auf das jeweilige Bild landet man dann auf der jeweiligen Flickr-Seite.
Nun hat mich an dem Script ein wenig gestört, dass der User erstmal meine Seite verlassen musste um sich ein Foto anzusehen (zumindest die Leute ohne einen coolen Browser) und zum anderen hatte ich die fixe Idee, die Bilder direkt über die eh schon integrierte Thickbox anzeigen zu lassen.
Da man das JavaScript des Badge-Makers nicht direkt beeinflussen kann musste ich mir mit ein wenig jQuery-Magic behelfen.
Der Badgemaker macht erst einmal folgendes: Er holt die letzten x Thumbnail-Bilder des eigenen Flickr-Profils ab, und packt diese als <img /> in den DOM, je nachdem wo wir den Scriptaufruf in unser HTML gepackt haben. Um das Bild herum baut er natürlich auch gleich den passenden Link zur jeweiligen Flickr-Seite. Das schöne daran ist zudem, das z.B. der Titel des Bildes direkt im Alt-Atribut des Bildes zu finden ist.
