jQuery – Mehr Dynamik für Ihre Webseite
Kommentare

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

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.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -