Offline – damit eine App in jedem Winkel der Welt funktioniert - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 284

bereit. Die letzte Zeile return false; verhindert, dass das Formular beim Absenden
die App neu lädt. Sie können Ihrer Liste nun bereits neue Aufgaben hinzufügen und
abspeichern (Abbildung 7.9).
Abbildung 7.9 Die Eingabe einer neuen Aufgabe auf einem iPhone und unter Android.
Das Abhaken der Todo-Liste übernimmt die Funktion changeTaskState :
var changeTaskState = function(todo){
todo.attr('class', 'done');
localStorage.removeItem(todo.attr('id'));
window.setTimeout(function(){
todo.remove();
},1500);
};
Der Funktion wird das Listenelement übergeben, dessen Klasse auf done gesetzt und
der entsprechende Eintrag aus dem localStorage gelöscht. Nach einer kurzen Verzö-
gerung von 1,5 Sekunden wird auch das Listenelement aus dem DOM-Baum gelöscht.
Diese Verzögerung nutzen Sie später dazu, das Element mit einer kleinen Animation
elegant auszublenden. Die Funktion wird wieder mit einem EventListener aufgeru-
fen:
$('#todo-liste').find(':checkbox').live('change', function(){
var todo = $(this).parent().parent();
changeTaskState(todo);
});