Wie erstellt man eine ToDo Liste in HTML5 mit Local Storage

Mit HTML5 ist es möglich Offline Applikationen zu schreiben. Ein Grund dafür ist der Local Storage. Dieser ermöglicht es Daten in dem Browser des Benutzers zu speichern. Im Prinzip war das schon immer durch HTTP Cookies möglich. Ein Nachteil von Cookies ist allerdings, dass sie bei jedem HTML Request mitgeschickt werden und pro Domain nicht mehr als 20 Cookies á 4KB existieren dürfen.

Die Größe von Local Storage hingegen ist nicht in ihrer Größe beschränkt. Die Daten werden von dem Browser des Benutzers verwaltet. Das bedeutet, dass die Daten auch nur in diesem Browser verfügbar sind.

Was bietet Local Storage also? Der Browser legt für die Seite eine Datenbank an, in der Datensätze gespeichert werden. Die Datensätze sind nicht wie bei einem Cookie oder Session Variablen auf ihre Größe beschränkt, sondern können beliebig groß sein. Öffnet man ein neues Fenster und ruft die Seite auf, wäre normalerweise die Session nicht mehr vorhanden. Dank Local Storage schon.

Local Storage hat im wesentlichen vier Methoden.

localStorage.setItem(id,value);
Mit diesem Methode kann man einer id einem Wert zuweisen.

localStorage.getItem(id);
Mit dieser Methode bekommt man  den Wert einer id zurück.

localStorage.removeItem(id);
Mit dieser Methode löscht man das Element mit der id.

localStorage.clear();
Alle Daten in der Local Storage werden gelöscht.

Man kann auch direkt auf die Elemente zugreifen über localStorage[id].

In diesem Tutorial verwende ich das jQuery Framework. Man kann das ganze aber auch ohne dieses Framework umsetzen. jQuery bietet aber die .blur() Funktion, die ein Event hervorruft, sobald ein Element getriggert wird.

Unser HTML body besteht im Wesentlichen aus der Liste, die allerdings das Attribut contenteditable mit dem Wert true aufweist. Dadurch kann man sie bearbeiten. Bei der Überschrift hab ich das gleich Attribut verwendet um die Liste auch für andere Zwecke verwenden zu können.

<ol id="liste" contenteditable="true">
      <li></li>
 </ol>

In dem JavaScript speichert man das HTML Object zunächst in eine Variable ab.

toDoListe = $('#liste');

Für jede dieser Variable (Liste / Überschrift) zwei verschiedene Aufrufe. Zunächst wird überprüft ob für diese id schon ein Wert abgespeichert wurde. Ist dies der Fall, rufen wir auf die HTML Objekt die jQuery .html() Funktion auf, wobei der Parameter unser localStorage Element ist.

if (localStorage.getItem('toDoListe')) {
toDoListe.html(localStorage.getItem('toDoListe'));
}

Wenn wir Änderungen in der Liste verfolgen möchten, können wir dafür die .blur() Funktion benutzten. Erfolgt eine Änderung speichern wir das Ergebnis im Local Storage.

toDoListe.blur(function() {
localStorage.setItem('toDoListe', $(this).html());
});

Da es zur Zeit Probleme mit Safari gibt, wenn zwei leere Listenelemente übereinander erzeugt werden, habe ich noch den folgenden Fix implementiert, der das vorherige Listenelement überprüft, ob es leer ist.

toDoListe.keypress(function(event) {
if(event.which==13){
if(toDoListe.find('li').last().html()=='&amp;lt;br&amp;gt;'){
event.preventDefault();
}
}
});

Zusätzlich ist noch ein Button implementiert, der die Funktion localStorage.clear(); aufruft um den Local Storage zu leeren.

Fertig ist unsere ToDo Liste! Erst nach dem aktualisieren der Seite kann man das Resultat begeistern.

DEMO DOWNLOAD

Ajaxifizierte Formulare mit jQuery Teil2

formular

Kümmern wir uns nun um das „stylen“ des Formulars. Mit Hilfe von CSS lassen sich HTML Elemente einfach modifizieren. Dazu erstellen wir uns erst einmal eine css Datei. Ich habe sie style.css genannt und in das selbe Verzeichnis abgelegt.

Eingebunden wird die Datei im head Bereich unserer formular.php mit dem Befehl:

<link rel="stylesheet" type="text/css" href="style.css" />

Continue reading

Ajaxifizierte Formulare mit jQuery

Mit Hilfe des jQuery Frameworks ist es einfach aus einem normalen Formular, ein hübsches Ajax Formular zu machen. Zunächst benötigt man dafür jQuery. Das bekommt man hier.

Wir erstellen zunächst eine php Website und nennen sie formular.php . Das Grundgerüst sieht wie folgt aus:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Formular</title>
</head>
<body>
<!-- Hier kommt unser Inhalt rein -->
</body>
</html>

Continue reading

Posted in JS

JavaScript Galerien und Slideshows

slide2a

Slideshow 2

Slideshow 2 ist eine JavaScript Klasse für MooTools zum animierten Streamen von einer Fotogalerie. Die Präsentation der Bilder sieht optisch recht schick aus. Auf der Homepage befinden sich 6 Beispiele für die Anwendung.

smooth

SmoothGallery

SmoothGallery nutzt ebenfalls die MooTools Bibliothek. Die Bedienung erinnert ein wenig an die Lightbox Navigation, nur dass die Galerie fest eingebettet ist auf der Seite.

jquer

jQuery Galleria

jQuery Galleria ist wie der Name schon sagt eine auf jQuery basierende Bildergalerie. Sie lädt alle Bilder auf einmal und zeigt unter dem ausgewählten Bild kleine Thumbnails. Gerade für die Präsentation von wenigen Bildern eignet sich die Galerie hervorragend.

noob

Noobslide

Noobslide ist eine MooTools Klasse. Sie erlaubt es Zeit gesteuerte Bildergalerien zu erstellen. Auf der Homepage befinden sich mehrer Beispiele. Die Effekte sind aber zum teil recht merkwürdig.

galleriffic

Galleriffic

Galleriffic bedient sich der jQuery Bibliothek. Im Gegensatz zu den oben genannten Galerien lädt es die Bilder aber dynamisch ein. Dieses spart erheblich Zeit beim Aufrufen der Seite.

jQuery 1.7 veröffentlicht

Themeroller

Themeroller

Bereits am letzen Freitag wurde die neuste Version des beliebten JavaScript Frameworks jQuery veröffentlicht.  Sie bringt neben vielen Bugfixes auch ein eigenes Css Framework mit sich. Das Framework wurde entwickelt um die Webentwicklung zu vereinfachen.

Plugins lassen sich jetzt leichter entwickeln. Gab es früher für jedes jQuery Plugin ein eigenes Stylesheet, was man erst analysieren und ändern musste, braucht man sich darum jetzt erst einmal keinen Kopf mehr zu machen. Mit dem ThemeRoller kann man sich ganz komfortabel Stylesheets erstellen.

Einen Überblick über die neuen Klassen in jQuery 1.7 gibt es hier. Für die Leute, die noch nicht mit jQuery gearbeitet haben gibt es eine Vielzahl von Hilfestellungen auf der jQuery Seite.