JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

true
    Die Funktion wird nur einmal erzeugt und in
Person.prototype
gespeichert.
    ----
    [ 16 ] http://de.wikipedia.org/wiki/Datenkapselung_(Programmierung)
    [ 17 ] http://plugins.jquery.com/project/mousewheel
    [ 18 ] http://plugins.jquery.com/project/drag , http://plugins.jquery.com/project/drop
    [ 19 ] http://flesler.blogspot.com/2008/02/jqueryserialscroll.html
    [ 20 ] http://en.wikipedia.org/wiki/Closure_(computer_science)
    [ 21 ] http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents
    [ 22 ] http://de.wikipedia.org/wiki/Aspektorientierte_Programmierung

Chapter 10. HTML-Forms durch eigenen Code verbessern
    Brian Cherne

Einführung
    Ob Sie mehr über JavaScript und jQuery lernen wollen oder einfach die schnellste Lösung für das aktuelle Problem benötigen – manchmal ist es am Besten, Code komplett selbst zu schreiben. Dieses Kapitel will Sie mit einfachen, generischen Lösungen versorgen, die dabei helfen sollen, eigenen Code schreiben zu können.
    Es sei angemerkt, dass es zwar von Vorteil sein kann, von Grund auf alles selbst zu schreiben, aber manche häufiger vorkommenden Probleme, wie zum Beispiel das Zählen der verbleibenden Zeichen, das automatische Anpassen von Textareas und die Form-Validierung (um nur ein paar zu nennen), wurden schon von anderen gelöst. Werfen Sie einen Blick in Chapter 11 oder stöbern Sie in den jQuery-Foren und -Blogs, um mehr Informationen über Plugins zu erhalten, die vielfach getestet und analysiert wurden. Manchmal hilft es auch, sich fremden Code anzuschauen, um herauszufinden, was am eigenen Code verbesserungswürdig ist.
    Wenn nötig, stelle ich im »Problem«-Bereich eines Rezepts Beispiel-HTML-Code bereit. Das ist keine philosophische Aussage – an nacktem HTML-Code ist nichts falsch. Aber ich finde die Idee förderungswürdig, JavaScript als Erweiterung bestehenden HTML-Codes und als Verbesserungsmöglichkeit der Benutzer-Interaktion anzusehen. JavaScriptist von Ihrem HTML-Code völlig getrennt und das sollte auch so gesehen werden.
    ----
    Note
    In den folgenden Rezepten zeige ich nur XHTML-Codeabschnitte, die für das Problem relevant sind. Denken Sie daran, dass Ihr Code ein komplettes XHTML-Dokument und auch validierbar sein sollte.
    Zudem nehme ich in den Rezepten nur dann
$(document).ready(function(){...})
mit auf, wenn es ein Teil der Diskussion ist. Alle anderen Lösungen gehen davon aus, dass Sie den JavaScript-Code an der richtigen Position in Ihrer Code-Struktur unterbringen – entweder im
.ready()
-Handler oder am Ende Ihrer Datei nach dem betreffenden XHTML-Code. In Chapter 1 finden Sie mehr Informationen dazu.
    ----

Ein Texteingabefeld beim Laden der Seite fokussieren
    Problem
    Sie haben eine Anmeldeform auf Ihrer Homepage und wollen, dass das Feld für den Benutzernamen beim Laden der Seite den Eingabefokus erhält.
    Lösung
    Verwenden Sie die jQuery-Methode
$(selector).focus()
:
// Wenn das HTML-DOM bereit ist
$(document).ready(function(){
    // Fokus auf
    $('#username').focus();
});
    Diskussion
    Das Verwenden von
$(document).ready()
sollte schnell genug sein. Beim Empfangen einer großen HTML-Datei über eine langsame Verbindung aber beispielsweise kann es passieren, dass der Cursor erst später als gewünscht in das Feld gesetzt wird – der Benutzer könnte schon den Namen angegeben haben und dabei sein, sein Passwort zu tippen, wenn
$(document).ready()
ausgeführt wird und den Cursor wieder in das Texteingabefeld für den Benutzernamen setzt. Wie ärgerlich! In diesem Fall können Sie ein bisschen JavaScript nach dem

-Tag nutzen, um den Fokus sofort zu setzen:

    Oder wenn Sie den Code lieber im Block
$(document).ready()
haben möchten, können Sie prüfen, ob das Eingabefeld schon Text enthält, bevor Sie den Fokus setzen:
// Wenn das HTML-DOM bereit ist
$(document).ready(function(){
    var $inputTxt = $('#username');
    if( $inputTxt.val() == '' ) {
     // standardmäßig den Fokus setzen
     $inputTxt.focus();
    }
});
    Was geschieht, wenn JavaScript abgeschaltet ist? Der Benutzer wird manuell in das Texteingabefeld klicken müssen, um seinen Namen angeben zu können.

Form-Elemente aktivieren und deaktivieren
    Problem
    Ihre Bestellform verfügt über Felder für die Rechnungs- und die Lieferadresse. Sie wollen dem Anwender entgegenkommen und bieten eine