HTML and CSS Reference
In-Depth Information
Beachten Sie, dass ab jetzt alle aufgelisteten Dateien immer aus dem Speicher Ihres
Telefons geladen werden. Für die Entwicklungsphase ist es daher ratsam, das Cache-
Manifest noch zu deaktivieren.
Verknüpfen Sie, wie bereits in den Kapiteln zuvor, die jQuery-Bibliothek mit der
HTML-Datei. Legen Sie außerdem eine Textdatei
app.js
an, in der Sie den JavaScript-
Code für Ihre WebApp schreiben:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>
<script src="js/app.js"></script>
7
In dieser Datei legen Sie die Funktion an, der Sie die Todo-Liste übergeben. Die Funk-
tion hängt der Liste
#todo-liste
ein neues Element mit dem Namen und einer ent-
sprechenden
id
an. Diese wird mittels
Date.now()
aus dem Erstellungszeitpunkt
generiert. Anschließend wird sie im
localStorage
gespeichert:
var addTask = function(todo){
var id = Date.now();
$('#todo-liste').append('<li class="todo" id="'+ id +'"><label><input type=
"checkbox">'+ todo +'</label></li>');
localStorage.setItem(id, todo);
};
Direkt danach fügen Sie dem Formularelement einen EventListener hinzu, welcher
beim Absenden des Formulars den Inhalt des Eingabefeldes ausliest und die Funk-
tion
addTask
ausführt:
$('#add').on('submit',function(){
var todo = $('#add').find('input[name=add-task]').val();
if(todo != "") {
addTask(todo);
}
/* Letzten Listenpunkt im Viewport sichtbar machen */
document.querySelector('#todo-liste li:last-child').scrollIntoView();
/* Eingabefeld leeren */
$('#add').find('input[name=add-task]').val('');
return false;
});
Die Funktion überprüft außerdem, ob überhaupt eine Aufgabe eingegeben wurde.
Damit verhindern Sie, dass der Nutzer eine Liste mit leeren Einträgen erstellt. Außer-
dem scrollen Sie die Liste zu dem letzten, also soeben erstellten, Eintrag. Anschlie-
ßend wird das Eingabefeld geleert und steht damit sofort für eine frische Aufgabe
Search WWH ::
Custom Search