To-Do Liste - von Webbausteine.de mit jQuery - funktioniert noch nicht auf Android

Guckt Euch bitte auch die Anleitungen von Webbausteine.de an.

Dieses kleine Skript verwendet die jQuery-Funktion “Local Storage” als Ersatz für ein Cookie.

Ihr benötigt also ein jQuery-Datei. Ich benötigt jQuery >= 1.10.2, daher müsst Ihr das Skript unter die jQuery von NOF einfügen. Dazu klickt Ihr auf der Seite, auf der Ihr das einbaut, unten links auf den Seiten <>Code Editor und fügt das Skript im Bereich [Custom4] ein.

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
  $(function() {
   var edit = document.getElementById("edit");

   $(edit).blur(function() {
    window.localStorage.setItem('todoData', this.innerHTML);
   });

   if (window.localStorage.getItem('todoData')) {
    edit.innerHTML = window.localStorage.getItem('todoData');
   }
  });

  function reset() {
   edit.innerHTML = "<li><br></li>";
   window.localStorage.setItem('todoData', edit.innerHTML);
  }
</script>

Hier meine CSS für die Anzeige der To-Do Box, das Ihr natürlich beliebig anpassen könnt. Diese Style Anweiung habe ich hier in die HTML des Layouts eingefügt.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > Zwischen Head Tags” einfügen

<style>
  ol#edit {
   font-family: "Comic Sans MS", Verdana, Arial, Sans-Serif;
   font-size: 1.5rem;
   color: #888888;
   background: #FFFFFF;
   border: Solid 1px #808080;
   border-radius: 10px;
   box-shadow: 3px 3px 6px #808080;
   list-style-position: Inside;
   width: 500px;
   padding: 10px;
  }
</style>

Nun zieht Ihr Euch ein Textfeld zur Anzeige dieser Box auf und fügt den Code unten in den HTML-Code Editor des Textfeldes ein.

<ol id="edit" contenteditable="true" spellcheck="false"><li></li></ol>

... zieht Euch ein zweites Textfeld darunter auf und fügt den Code zur Anzeige des Buttons “Zurücksetzen” ebenfalls in den HTML-Code Editor ein.

<button onClick="reset()">Aufgabenliste zurücksetzen</button>

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik