JQuery Kochbuch (German Edition)

werden automatisch hinzugefügt.
    Auch haben wir die Style-Regeln für den Hover-Effekt in eine CSS-Klasse verschoben und damit Verhalten und Darstellung getrennt. Wollen wir nun den Stil des Hover-Effekts ändern, brauchen wir nur das Stylesheet anpassen und müssen nicht mehr am Markup herumschrauben.
    Diskussion
    Eine »All-In-One«-HTML-Datei mit
on
event
-Attributen funktioniert bei einer kleinen, einfachen Seite wunderbar, aber sie lässt sich nur sehr schlecht skalieren. Wenn Ihre Seiten komplexer werden, wird der Code durch eine Trennung von Darstellung und Verhalten leichter wartbar.
    Wir haben in diesem einfachen Beispiel keine getrennten
.js
- oder
.css
-Dateien genutzt, aber wenn Sie mehrere Seiten haben, die den gleichen JavaScript- oder CSS-Code nutzen, ist dies unbedingt empfehlenswert. Die betreffenden Informationen werden dann nur einmal in den Browser-Cache geladen, anstatt sie mit jedem Laden der Seite neu holen zu müssen. So werden die Seiten schneller geladen, nachdem einmal eine erste Seite aufgesucht wurde.

jQuery für die progressive Verbesserung nutzen
    Problem
    Sie wollen eine Site aufbauen, mit der einfache Aufgaben verwaltet werden können. Dabei soll der Anwender allen Komfort erfahren – Animationen, Ajax, alles, was das Herz begehrt – Sie wollen aber auch Anwendern entgegenkommen, die JavaScript abgeschaltet haben.
    Lösung
    Sie können die Site so aufbauen, dass sie ohne all die coolen Flash-Animationen und ähnliche Features funktioniert, und dann zurückhaltend JavaScript-Funktionalität hinzufügen:
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    
    
    

    

    

    

    
• 
      
       jQuery lernen
      

    
• 
      
       Progressive Verbesserung lernen
      

    
• 
      
       Tolle Websites erstellen
      

    

    

    Die Form auf dieser Seite benötigt kein JavaScript. Der Anwender markiert die abgeschlossenen Aufgaben und schickt die Form ab. Dann muss der Server eine neue Seite laden, auf der die fertigen Aufgaben aus der Liste entfernt sind.
    Jetzt können wir die Seite mit jQuery progressiv verbessern: Wir binden einen Eventhandler an die Checkboxen, der ein normales Abschicken der Form simuliert. Dazu holt er sich die entsprechende URL aus der Form und erzeugt POST-Daten mit der markierten Checkbox. Dann animieren wir das Entfernen der Aufgabe, um den Anwender Feedback zu geben. Zudem verbergen wir den Button zum Abschicken der Form, da das Abschließen einer Aufgabe direkt umgesetzt wird.
    Diskussion
    Auch wenn heutzutage nur wenige Anwender ohne JavaScript unterwegs sind, ist es trotzdem gute Praxis, Seiten – wenn möglich – so zu bauen, dass sie auch ohne JavaScript funktionieren. Man kann dann jQuery und JavaScript nutzen, um sie zu verbessern.
    ----
    Warning
    Achten Sie darauf, die User Experience mit JavaScript nicht schlimmer zu machen. Die JavaScript-freie Version dieser Seite gibt Ihnen zwar keine sofortige Rückmeldung, wenn Sie eine Aufgabe markieren, aber Sie können ihre Meinung noch problemlos ändern, bevor Sie die Form abschicken.
    Wenn Sie jede Checkbox direkt abschicken, wenn sie angeklickt wird, müssen Sie den Anwendern auch die Möglichkeit geben, diese Aktion rückgängig zu machen. Verschwindet die Aufgabe von der Seite, dann werden die Benutzer Angst davor haben, einen Klick zu tätigen, weil sie vielleicht das falsche Element anklicken. Sie können die Aufgabe entweder auf der Seite lassen – nur verschoben in einen