HTML and CSS Reference
In-Depth Information
blenden und .fadeOut() zum Ausblenden eines Elements bereit. Mit .fadeToggle()
wechselt der Zustand genau wie bei .toggle() oder .slideToggle() .
2
Animationen helfen dabei, dem Benutzer bestimmte Vorgänge in der Benutzerober-
fläche verständlich zu machen: Woher kommt der Button? Wohin verschwindet der
Textblock? Allerdings sind Animationen sehr prozessorlastig und stellen damit, vor
allem bei mobilen WebApps, eine Herausforderung an die Hardware dar. In Kapitel 3,
»Konzeption und Gestaltungsprinzipien«, erklären wir Ihnen, wie Sie JavaScript und
jQuery für Smartphones optimieren, um die maximale Performance herauszukit-
zeln. Generell gilt aber immer: Setzen Sie Animationen sparsam ein! Im Zweifelsfall
verzichten Sie lieber auf den Effekt, auch wenn er beim ersten Ausprobieren noch so
toll erscheint. Wenn die WebApp damit entscheidend langsamer und schwerer be-
dienbar wird, dann erzeugt die Animation hier eher Frust beim Benutzer.
Ereignisse und Nutzereingaben
.on(ereignis, funktion)
Elemente, die bei einem Nutzerereignis eine Funktion aufrufen sollen, bekommen
diese mit der Methode .on() zugewiesen. Dabei wird zunächst der Name des Ereig-
nisses als Zeichenkette (String) übergeben. Danach, durch ein Komma getrennt, die
Funktion, die aufgerufen werden soll. Sie können jedem Element mehrere Event-
Handler zuweisen. So kann ein Button unterschiedliche Funktionen bei unterschied-
lichen Ereignissen aufrufen:
$('button').on('mousedown', function(){
$('#box').hide();
}).on('mouseup', function(){
$('#box').show();
});
Dieser Code versteckt das Element #box , sobald Sie den Button mit der Maus drücken
und gedrückt halten. Wenn Sie die Maustaste wieder loslassen, wird das Element wie-
der angezeigt.
.off(ereignis)
Mit .off() nehmen Sie einem Element den zuvor definierten EventHandler wieder
weg. Das ist vor allem dann sinnvoll, wenn Sie beispielsweise einen Button deaktivie-
ren möchten. Sie müssen der Methode lediglich den Namen des Ereignisses übergeben.
AJAX
Wie Sie Daten vom eigenen Server laden, haben Sie bereits gelernt. Wenn Sie Daten
von einem fremden Server benötigen, verwenden Sie den Befehl:
Search WWH ::




Custom Search