JQuery - Mehr Dynamik für Ihre Webseite

jQuery – Mehr Dynamik für Ihre Webseite
jQuery ist ein von John Resig entwickeltes JavaScript Framework und wird inzwischen
von vielen Webdesignern und Programmierern als Standardbibliothek für dynamische
Webanwendungen verwendet. Das Framework vereinfacht den Zugriff auf den HTML-
Dokumentenbaum, kümmert sich um die Ereignisbehandlung, um Animationen und die
dynamische Interaktion im Hintergrund mittels Ajax. Trotz der Funktionsvielfalt ist die
aktuelle Version der Bibliothek gerade mal 26 KB groß und wird von allen aktuellen
Browsern (einschließlich Internet Explorer 6) unterstützt. Der Kern des Frameworks
verzichtet auf visuelle Komponenten (Widgets). Diese finden sich in der Erweiterung
jQuery UI, auf die später noch ausführlicher eingegangen werden soll.

Von Installation kann man eigentlich bei jQuery nicht sprechen. Man kopiert sie einfach
die JavaScript-Datei, die man auf der Webseite des jQuery-Projekts [1] erhält, in Ihr
Projekt. Eingebunden wird diese in den Header der HTML-Seite mit .
Zugriff auf einen oder mehrere Knoten bekommt man mit der Dollar-Funktion $().
Alternativ kann man auch jQuery() verwenden. Um nun überhaupt auf den
Dokumentenbaum zugreifen zu können, muss man natürlich erst mal wissen, ob dieser
komplett geladen ist. Das übernimmt in jQuery das ready-Event (Listing 1).

Listing 1

$(document).ready(function(){

  alert("Hello from jQuery!");

});

Selektieren einfach gemacht
Mit jQuery können Elemente des Dokumentenbaums sehr einfach selektiert werden:

1. $('p') – wählt alle p-Elemente der Seite
2. $('div') – wählt alle div-Elemte der Seite
3. $('h3') – wählt alle h3-Elemente der Seite

Die oben genannten Selektoren kann man auch, wenn benötigt, mit $(’p,div,h3’)
zusammenfassen. Aber jQuery kann noch mehr. Durch eine vorangestellte Raute erhält
man den Zugriff über die ID des Elements: $(’#myelement’). Mit dem class-Namen
verhält es sich ähnlich: $(’.myclass’). Diese Schreibweise ist dem Entwickler natürlich aus
seinen CSS-Dateien bekannt, was den Umgang mit den Selektoren erheblich vereinfacht.
Darüber hinaus gibt es die Möglichkeit, direkt auf bestimmte Unterelemente zuzugreifen.
Mit $(’div#myelement p’) wählt man alle p-Elemente innerhalb des div mit der ID
myelement. Es gibt noch weitere Selektionsmöglichkeiten, die ich an dieser Stelle nicht
alle ausführlich behandeln kann. Eine erste Anlaufstelle für Informationen bietet die
ausgezeichnete Dokumentation von jQuery [2].

ANIMATION AUF KNOPFDRUCK
Nun ist es ja ganz nett, dass wir Elemente auf unserer Webseite selektieren können,
doch wirklich beeindrucken kann das noch nicht. Listing 2 zeigt, wie man auf das click-
Ereignis auf ein Element reagiert und dann Meldung ausgibt.

Listing 2

$('div#myelement p').click(function() {
  alert("myelement p geklickt");
});

Damit nun ein wenig Animation in die ganze Sache kommt, erweitern wir die bereits
erstellte Datei um ein paar einfache Buttons (Listing 3).

Listing 3

Wie man an der Funktion toggle sehen kann, ist es möglich, die Geschwindigkeit beim
Ein- und Ausblenden zu beeinflussen. Anstatt der Parameter slow, normal und fast kann
auch ein numerischer Wert in Millisekunden angegeben werden. Der zweite ebenfalls
optionale Parameter ist eine Callback-Funktion, die nach Beendigung der Animation
ausgeführt wird. So zeigt die erweiterte hide-Funktion in Listing 4 eine Meldung an, wenn
der Text ausgeblendet ist. Das Ausblenden selbst dauert drei Sekunden.

Listing 4

$('#hideButton').click(function() {

       $('#text').hide(3000,function(){

             alert("Text versteckt!");

       });

});

Animierte Transparenz
jQuery erlaubt es, die Transparenz von Elementen animiert zu verändern. Listing 5 zeigt
diesen Effekt anhand eines Bildes.

Listing 5

  // Bild einblenden

       $('#fiButton').click(function() {

             $('img').fadeIn();

       });

  // Bild ausblenden

       $('#foButton').click(function() {

             $('img').fadeOut("slow");

       });

  // Bild in 8 Sekunden halbtransparent

       $('#ftButton').click(function() {

             $('img').fadeTo(8000, 0.5);

       });

Die Funktion fadeTo wird im Beispiel über acht Sekunden ausgeführt. Der zweite
Parameter kann einen Wert zwischen 0 und 1 annehmen. Dieser steht für die zu
erzielende Transparenz. Auch hier kann der optionale dritte Parameter eine Callback-
Funktion enthalten. Animationen können leicht miteinander verkettet werden. Die
einzelnen      Effekte      werden      dazu   einfach      aneinander     gehängt:
$('img').fadeOut("slow").fadeIn("slow");.

jQuery UI
Anders als bei anderen JavaScript Frameworks (YUI, ExtJS etc.) sind grafische Komponenten nicht im
Kern der Bibliothek vorhanden. Man muss also keinen unnötigen Traffic durch visuelle Komponenten
verschwenden, die vielleicht gar nicht benötigt werden. Aber auch jQuery UI ist modular aufgebaut.
Unter [3] kann man sich die gewünschten visuellen Komponenten mithilfe des Download-Builder
zusammenklicken und dann als Paket herunterladen. Zusätzlich sollte man dem ambitionierten
Designer den Theme Roller [4] ans Herz legen. Mit seiner Hilfe lassen sich die Komponenten farblich
individuell gestalten. Für den schnellen Start kann man eines der vielen vorgefertigten Designs
wählen.

Nachfolgend werden die Komponenten Dialog, Autocomplete und Datepicker etwas ausführlicher
erläutert. Sie werden merken, dass man mit wenig Quelltext sehr schnell zu Ergebnissen kommt. Für
die Benutzung von jQuery UI müssen die Dateien im Head der HTML-Datei wie in Listing 6
referenziert werden. Sie sollten generell darauf achten, dass css-Dateien vor den js-Dateien
referenziert werden.

Hello from jQuery UI
Listing 6 zeigt ein erstes kleines Beispiel anhand eines Dialogfensters. Als Parameter wird
an dieser Stelle lediglich autoOpen : false gesetzt, damit das automatische Öffnen des
Dialogs unterbunden wird. Dieses soll auf Knopfdruck geschehen. Dialoge eignen sich
sehr gut, um dem Benutzer einer Webanwendung Statusmeldungen zu geben oder
modale Abfragen zu stellen. Eine Übersicht über alle nutzbaren Ereignisse, Optionen und
Methoden zum Dialog findet man unter [5].

Listing 6

$(document).ready(function(){

    $( "#dialog" ).dialog({

         autoOpen: false

    });

    $('#dialogButton').click(function() {

         $( "#dialog" ).dialog( "open" );

         return false;

    });

           });

  Ein kleines Fenster, um dem User Statusinformationen zu liefern. X
schließt das Fenster - Größe ändern erwünscht ;-).

Datum selektieren
Ein Eingabefeld mit einer Datumsauswahl gehört in jeder Webanwendung zum Standard.
Sei es, um nur mal eben schnell den Geburtstag eines Kunden in die Datenbank zu
schreiben oder die Reisedaten bei einer Buchung einzutragen. In Listing 7 wird mit einer
Zeile Quelltext und zwei optionalen Parametern ein Datumsauswahlfeld (Datepicker) an
ein Eingabefeld geheftet.

Listing 7

$(function() {

  $( "#datepicker" ).datepicker({

      showWeek: true,

      firstDay: 1

  });

});

Datum: 

Auch die Datepicker-Komponente verfügt über zahlreiche Ereignisse, Optionen und
Methoden [6]. Wenn der Datepicker z. B. nicht an ein Eingabefeld angehängt, sondern
direkt angezeigt werden soll, kann man diesen einfach per 
einbinden.

Autocomplete
Wie von großen Suchmaschinenanbietern bekannt, komplettiert jQuery neuerdings
Eingaben in Eingabefeldern mittels autocomplete. Die Funktion ist wie die anderen
Komponenten von jQuery UI leicht zu implementieren. In Listing 8 werden alle deutschen
Bundesländer als Datenquelle benutzt.

Listing 8

$(function() {

  var innerCountries = [

      "Baden-Württenberg",

      "Bayern",

      "Berlin",

      "Brandenburg",

      "Bremen",

      "Hamburg",

      "Hessen",

      "Mecklenburg-Vorpommern",

      "Niedersachsen",

      "Nordrhein-Westfalen",

"Rheinland-Pfalz",

       "Saarland",

       "Sachsen",

       "Sachsen-Anhalt",

       "Schleswig-Holstein",

       "Thüringen"

  ];

  $( "#myelem" ).autocomplete({

       source: innerCountries

});

Bundesland wählen: 

Die automatische Vervollständigung startet nach der Eingabe des ersten Buchstabens.
Sinnvoll ist es natürlich, die Daten nach einer Eingabe direkt vom Webserver bzw. aus
der Datenbank per XML bzw. JSON nachzuladen.

Plug-ins
Wenn Sie eine visuelle Komponente oder eine bestimmte Funktion vermissen, gibt es die
Möglichkeit, jQuery durch Plug-ins zu erweitern. Entweder man erweitert das Framework
um eigene Plug-ins oder sucht unter [7]. Dort finden sich bereits dutzende Plug-ins für
jeden erdenklichen Anwendungsbereich.

Ausblick auf jQuery Mobile
Die neueste Erweiterung des jQuery Frameworks befindet sich derzeit im Alpha-2-
Stadium: jQuery Mobile. Diese Erweiterung erlaubt es, optimierte Webanwendung gezielt
für Smartphones und Tablet-PCs zu entwickeln und ihnen einen geräteunabhängigen
Look zu verpassen. Wie das funktioniert, erfahren Sie in der kommenden Ausgabe des
Entwickler Magazins. Informationen zum derzeitigen Entwicklungsstand, erste Beispiele
und einleitende Dokumentation finden Sie unter [8].

Stefan Göppert programmiert bei der sederis gmbh Delphi- und PHP Anwendungen.
Freiberuflich vertreibt er CRM-Anwendungen für kleine und mittelständische
Unternehmen. Er bloggt unter http://blog.stefangöppert.de. Per E-Mail erreichen Sie ihn
unter stefan@magicdesignssoftware.de.

[1] http://jquery.com

[2] http://docs.jquery.com/

[3] http://jqueryui.com/download

[4] http://jqueryui.com/themeroller

[5] http://jqueryui.com/demos/dialog

[6] http://jqueryui.com/demos/datepicker

[7] http://plugins.jquery.com/

[8] http://jquerymobile.com/