Mehr Dynamik für Ihre Webseite

jQuery
Kommentare

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).

$(document).ready(function(){ 
alert("Hello from jQuery!"); 
});

Selektieren einfach gemacht

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

  • $(‚p‘) – wählt alle p-Elemente der Seite
  • $(‚div‘) – wählt alle div-Elemte der Seite
  • $(‚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.

$('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 
 

$(document).ready(function(){ 

// Text verstecken 
$('#hideButton').click(function() { 
$('#text').hide(); 
}); 

//Text anzeigen 
$('#showButton').click(function() { 
$('#text').show(); 
}); 

//Text langsam toggeln 
$('#toggleButton').click(function() { 
$('#text').toggle('slow'); 
}); 

}); 
 


Ich bin ein Text und werde ein- und ausgeblendet!

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.

$('#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.

// 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“);.

[ header = Seite 2: jQuery UI ]

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 
 
 
body { 
font-family : Verdana, Arial, SunSans-Regular, sans-serif; 
font-size : 11px; 
} 

 
 
 
 
$(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.

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.

$(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.

$(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].

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -