Dieses Tutorial gibt eine erste Einführung, wie man mit Hilfe von JavaScript und der Bibliothek jQuery ein einfaches HTML basiertes Widgets erstellen kann. Ziel soll es sein, dieses Widget auf beliebigen Webseiten oder Blogs einbinden zu können.
Ein Grund für mich diesen Artikel zu schreiben war vor allem die Tatsache, dass häufig selbst die einfachsten Widgets im Web über Flash oder Iframes eingebunden werden. Diese beiden Varianten haben allerdings entscheidende Nachteile. Sie sind nicht Teil der Seite selbst und somit immer ein Fremdkörper auf der Website. Dies wird besonders bei Flash deutlich. Ist der entsprechende Player nicht installiert oder kann er, wie im Falle von iPad, iPhone und Co. gar nicht erst installiert werden, ist das Widget für einen Teil der Besucher nicht sichtbar.
Eine Lösung haben Facebook und Google bereits vorgemacht. Wer schon einen “like”- oder “plus one”-Button auf seiner Website eingebunden hat, kennt bereits die Herangehensweise.
Dabei ist die Lösung die Inhalte die bisher über Iframes und Flash dargestellt wurden in JavaScript nachzubilden. Dies bietet den deutlichen Vorteil, das es zum einen asynchron geschehen kann und zum anderen das Widget selbst Bestandteil der Seite ist. Außerdem sind Widgets so auch Seiten nutzbar die kein Flash oder keine Iframes erlauben.
Unser JavaScript Widget wird dabei mit folgenden Zeilen Code auf einer Website eingebunden:
<div id="eindeutige-id"></div> <script type="text/javascript" async="true" src="http://widget.js"></script>
Das wars schon? Japp! Zumindest das Einbinden des Widgets. Wir benötigen lediglich zwei Dinge. Zum einen ein HTML-Element mit einer eindeutigen ID und zum anderen ein bisschen JavaScript und jQuery Code der uns das HTML-Element nach unsern wünschen bearbeitet und daraus das Widget baut.
Das JavaScript selbst lagern wir auf einem externen Server aus, so dass wir das Widget auf vielen verschiedenen Seiten einbinden können, aber ein zentrales JavaScript haben, von wo aus wir das Widget steuern können.
Vorteil hierbei ist, dass das Widget selbst Teil der Website ist und so auf allen Medien dargestellt werden kann. Asynchrones laden hilft dabei, andere Inhalte der Website nicht zu blockieren.
Doch wie wird aus einem einfachen Div-Element ein Widget. Am besten lässt sich dies anhand eines Beispiels erklären. Dafür bauen wir einen kleinen Übersetzer der uns für ein gegebenes Wort die englische Übersetzung auf der leo.org Webseite anzeigen soll.
Um etwas schneller voran zu kommen bietet es sich an die Bibliothek jQuery zu nutzen. Hiermit ist es deutlich handlicher DOM-Element zu erstellen und zu bearbeiten. Wie wir diese Bibliothek am besten in unser Widget einbinden werde ich in einem Separaten Artikel erläutern.
Lasst uns also starten. Zuerst benötigen wir das DOM-Element unseres Widgets. Hier hilft uns die eindeutige ID die wir vergeben haben und die Selektoren die jQuery bietet.
Nehmen wir folgenden HTML Code als Grundlage:
<div id='my-widget'></div> <script type="text/javascript" async="true" src="leo-widget.js"></script>
Die Datei leo-widget.js beginnt jetzt wie folgt (Vorraussetzung ist das die Website jQuery nutzt):
jQuery(document).ready(function(){ // Das DOM-Element des Widgets var myWidget = $("#my-widget"); ... }
Wir warten bis der DOM fertig aufgebaut ist (Zeile 1). Sobald dies geschehen ist speichern wir uns auf der Variable “myWidget” das DOM-Element unseres Widgets. In diesem Beispiel das DIV-Element mit der ID: “my-widget”.
Dieses können wir jetzt nach Herzenslust manipulieren. Zum Beispiel in dem wir gewisse CSS-Eigenschaften setzen:
myWidget.css({ 'width': '300px', 'height': '50px', 'background-color': '#ccc' });
Oder neue HTML Elemente erzeugen und diese dem DOM-Element anhängen:
//input field
var inputDOM = $('<input />', {
'id': 'widget-input',
'type': 'text',
'size': '35',
'value': 'Wort eingeben ...'
});
// submit button
var buttonDOM = $('<a />', {
'id': 'widget-submit',
'href': '#'
});
// append to DOM
myWidget.append(inputDOM);
myWidget.append(buttonDOM);So können wir Stück für Stück das Widget je nach Anforderung zusammenbauen. Dabei ist es nicht nur möglich Elemente zu erzeugen (Zeile 2 und 10) und bestehen anzuhängen (Zeile 16), sondern auch die Inhalte bereits bestehender Elemente zu ändern. So können wir dem Button noch die Beschriftung “Los!” geben:
buttonDOM.text("Los!");
Neben der Manipulation können bei den Elementen auch Event-Listener gesetzt werden, die z.B. ein “onclick”-Ereignis abfangen und dafür die gewünschte Funktion aufrufen. In diesem Beispiel wird so eine Url aus dem Inhalt des Input Feldes gebaut und bei leo.org aufgerufen:
buttonDOM.click(function(event) { event.preventDefault(); var url = 'http://dict.leo.org/ende?search=' + inputDOM.val(); var newWindow = window.open(url, "_self"); newWindow.focus(); });
Dieser Event-Listener sorgt dafür, dass bei einem click auf den “Los!”-Link (Zeile 1) eine anonyme Funktion aufgerufen wird. Diese unterbindet zuerst das der Link default mäßig geöffnet wird (Zeile 2).
Dann wird die zu öffnende URL gebaut. Dabei wird der Inhalt des Input Feldes ausgelesen (Zeile 3) und an die leo Url angehängt. Die fertig URL muss dann einfach im aktuellen Fenster geöffnet werden und fertig ist unser Mini-Widget.
Natürlich ist dies nur ein erster kleiner Ausschnitt von dem, was mit JavaScript und jQuery möglich ist, aber es zeigt sehr deutlich, dass “unschöne” Flash-Lösungen hoffentlich bald der Vergangenheit angehören werden.
Dieses einfache Beispiel könnt ihr euch hier anschauen: jquery widget wie man sieht wären jetzt noch weitere Schritte nötig, um das Widget auch grafisch ansprechend zu gestalten 
Wer direkt den Source Code haben will findet ihn auf meinem github accound: jquery widget source
Da größere Widgets schnell an Übersichtlichkeit verlieren, wird es bald ein zweites Tutorial zu diesem Thema geben. Hier werde ich das Thema “Kapselung von Objekten in JavaScript” auf das Widget anwenden und zeigen, dass man auch mit JavaScript dazu in der Lage ist, schönen, modularen Code zu schreiben. Wenn man nur will 