JQuery Kochbuch (German Edition)

zu platzieren.

Ein Eingabeelement mit seinem Inhalt wachsen lassen
    Problem
    Eine Textareaist als Teil einer Benutzerschnittstelle häufig abhängig von der Benutzereingabe entweder zu groß oder zu klein. Ist sie zu groß, geraten andere wichtige Elemente außer Sicht, ist sie zu klein, muss der Anwender zu viel scrollen.
    Lösung
    Nutzen Sie das Elastic-Plugin , um mit einer kleinen vorgegebenen Höhe zu beginnen, die Sie dann automatisch wachsen lassen, wenn der Anwender eine bestimmte Menge Text eingibt.
    Die Verwendung ist sehr einfach. Mit dieser Textarea:

    können wir das Plugin wie folgt anwenden:
$("#commentbody").elastic();
    Diskussion
    Das Plugin bindet sowohl einen Timer als auch ein Blur-Event an die Textarea, um auf Änderungen zu achten. Geschieht dies, kopiert es den Inhalt in eine verborgene Textarea mit den gleichen Styles wie das Original, berechnet die neue Höhe hierfür und beginnt bei einem Überschreiten der aktuellen Höhe eine Animation, um sie anzupassen. Damit kann die Textarea bei größeren Inhalten wachsen, aber auch schrumpfen, wenn Inhalte entfernt werden.
    Eine Alternative ist, den Anwender die Größe der Textarea anpassen zu lassen. Safari bietet das standardmäßig an. Das Resizable-Plugin von jQuery UI stellt diese Funktionalität auch für andere Browser zur Verfügung. Nutzen wir eine Textarea
resizable
, können wir das Plugin wie folgt anwenden, wobei wir die Handle-Option so einstellen, dass wir nur einen Handle in der unteren rechten Ecke erhalten:
$("#resizable").resizable({
    handles: "se"
});
    Nutzt man das Base Theme von jQuery UI, dann wird der Handle unterhalb der Textarea angezeigt. Um es in die untere rechte Ecke der Textarea zu verschieben, müssen wir ein bisschen CSS hinzufügen:
.ui-resizable-handle {
    bottom: 17px;
}

Ein Datum wählen
    Problem
    Eingabefelder für Datumswerte braucht man, wenn man Veranstaltungen, Flüge oder Hotelzimmer sucht oder wenn man ein Geburtsdatum in einer Registrierungsform eintragen möchte. Dazu nutzt man häufig drei Select-Felder – für Tag, Monat und Jahr. Das ist zwar für ein Geburtsdatum akzeptabel, es kann aber sehr nervig sein, wenn man nach Flügen in einem bestimmten Zeitraum sucht.
    Lösung
    Der Datepicker von jQuery UI kann dieses Problem lösen, indem er einen Kalender zusammen mit einer ganzen Reihe von Konfigurationsoptionen anbietet, mit denen man ihn für die verschiedensten Anwendungen nutzen kann.
    Der Standard-Datepicker wird einfach auf ein Eingabefeld angewendet:
Beginn:


$("#startAt").datepicker();
    Damit werden die Events an das Feld gebunden, die notwendig sind, um den Datepicker anzuzeigen, wenn das Eingabefeld den Fokus erhält. Ausgangswert ist das aktuelle Datum. Es gibt Buttons, um den nächsten oder vorherigen Monat anzuzeigen, zudem kann man mit dem Kalender einen Tag auswählen.
    Damit der Datepicker noch nützlicher wird, müssen wir ihn an die Anwendung anpassen. Bei der Flugsuche können wir davon ausgehen, dass der Anwender nach einem Flug in den nächsten drei Monaten sucht. Daher zeigen wir gleich drei Monate auf einmal an, wobei wir mit der aktuell nächsten Woche beginnen:
Von

bis

    Wir nutzen zwei Eingabeelemente, die jeweils mit einem passenden Label versehen sind, und wenden dann den Datepicker auf beide an:
var dates = $('#from, #to').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onSelect: function(selectedDate) {
     var option = this.id == "from" ? "minDate" : "maxDate";
     dates.not(this).datepicker("option", option, new Date(selectedDate));
    }
});
    Das Standard-Datum für den Datepicker ist das aktuelle Datum plus eine Woche, gesetzt über die Option
defaultDate
. Mit
changeMonth: true
wird zudem ein Select für die Auswahl des Monats angezeigt. Die Option
numberOfMonths: 3
legt fest, dass drei Monate auf einmal angezeigt werden sollen.
    Die Option
onSelect
ist ein Event, das ausgelöst wird, wenn der Anwender ein Datum selektiert. Ist das »Von«-Datum ausgewählt worden, wird die Option
minDate
für das »Bis«-Datum gesetzt, bei Auswahl des »Bis«-Datums wiederum wird die Option
maxDate
des »Von«-Datums gesetzt.
    Damit kann der Anwender einen der beiden Datumswerte auswählen. Möchte er dann den anderen