Initialisierung

Um die To Do List auf der Seite anzuzeigen, führen Sie die folgenden Schritte aus:

1. Quelldateien der To Do List auf einer Seite einbinden
2. Zwei Container erstellen: einen für die Liste und einen für die Toolbar
3. Liste und Toolbar initialisieren

Quelldateien einbinden

Laden Sie das To Do List-Paket herunter und entpacken Sie es in einen Ordner Ihres Projekts. Das Paket erhalten Sie auf der Download-Seite.

Binden Sie die folgenden Quelldateien auf Ihrer Seite ein:

• todo.js
• todo.css

Passen Sie die relativen Pfade an die Struktur Ihres Projekts an. Das folgende Beispiel lädt beide Dateien aus dem Ordner dist:

index.html

<script type="text/javascript" src="./dist/todo.js"></script>
<link rel="stylesheet" href="./dist/todo.css">

Container erstellen

Das To Do List-Widget besteht aus zwei Komponenten: einer Liste und einer Toolbar.

Erstellen Sie zwei Container für die Liste und die Toolbar und weisen Sie ihnen IDs zu (zum Beispiel "root" und "toolbar"). Der folgende Ausschnitt deklariert beide Container:

index.html

<div id="toolbar"></div> <!-- Container für die Toolbar (optional) -->
<div id="root"></div> <!-- Container für die Liste */}

To Do List initialisieren

Liste initialisieren

Initialisieren Sie die Liste mit dem Konstruktor new ToDo(). Der Konstruktor nimmt zwei Parameter entgegen:

• einen Container, in den die Liste eingefügt werden soll (der oben erstellte Container)
• ein Objekt mit Konfigurationseigenschaften (die vollständige Liste finden Sie in der Konfigurationsübersicht)

Der folgende Code-Ausschnitt erstellt eine Liste innerhalb des Containers #root:

index.js

const { ToDo, Toolbar } = todo; // globales todo-Objekt destrukturieren

// Liste erstellen
const list = new ToDo("#root", {
    // Konfigurationseigenschaften
});

Toolbar initialisieren

Initialisieren Sie die Toolbar mit dem Konstruktor new Toolbar(). Der Konstruktor nimmt zwei Parameter entgegen:

• einen Container für die Toolbar (im vorherigen Schritt erstellt)
• ein Objekt mit Konfigurationseigenschaften (die vollständige Liste finden Sie in den Toolbar-Eigenschaften)

Info

Die Toolbar-Initialisierung ist optional. Überspringen Sie diesen Schritt, wenn Sie in Ihrer Anwendung keine Toolbar benötigen.

Der folgende Code-Ausschnitt erstellt die Toolbar und verknüpft sie über die Eigenschaft api mit der Liste:

index.js

const { ToDo, Toolbar } = todo; // globales todo-Objekt destrukturieren

// Liste erstellen
const list = new ToDo("#root", {
    // Konfigurationseigenschaften
});

// Toolbar erstellen
const toolbar = new Toolbar("#toolbar", {
    api: list.api
});

Hinweis

Destrukturieren Sie das globale todo-Objekt in ToDo und Toolbar, um sie direkt zu verwenden.

Überspringen Sie diesen Schritt, wenn Sie die Konstruktoren new todo.ToDo() und new todo.Toolbar() direkt aufrufen.

Daten in die To Do List laden

Der Artikel Daten laden beschreibt, wie Daten in die DHTMLX To Do List geladen werden.

Beispiel