JS ListView

Erstellen Sie mit wenigen Codezeilen klassische oder vorlagenbasierte JavaScript-Listen.

Der schnelle Weg, eine Listenansicht zu Ihrer JavaScript-Anwendung hinzuzufügen

Ob horizontal oder vertikal, klassisch oder mit einer Benutzervorlage, stilvoll und interaktiv - MindFusion JS ListView bietet genau das, wonach Sie in einem Listensteuerelement suchen.

List Elemente

Das ListView-Steuerelement unterstützt eine unbegrenzte Anzahl von Elementen, die optimal auf Ihre Anforderungen zugeschnitten werden können. Sie können einen Block mit HTML-Elementen erstellen und diese dem Listenelement über die Eigenschaft template als Inhalt zuweisen.

Online-Beispiel: Eine Liste mit Obstschalen

Intuitive API

Mit ListView können Sie sowohl erweiterte als auch herkömmliche interaktive HTML-Listen erstellen. Um eine Liste mit Elementen zu erstellen, müssen Sie nur Instanzen der ListItem-Klasse erstellen, ihnen Titel geben und sie der Auflistung des ListView-Elements hinzufügen. Jedes ListItem macht verschiedene Eigenschaften für Stil und Benutzerinteraktion verfügbar.

API Übersicht: ListView und ListItem

Mehrfachauswahl in einer JavaScript ListView

Benutzerinteraktion

Benutzer können mehrere Elemente gleichzeitig auswählen sowie Elemente ziehen und ablegen. Für längere Listen ist das Scrollen standardmäßig aktiviert.

Online-Beispiel: Interaktives ListView
Tutorial: Ziehen und Ablegen in einem ListView-Steuerelement

Veranstaltungen

Die ListView löst Ereignisse für alle Aktionen aus, die der Benutzer an der Liste und ihren Elementen ausführt - auswählen, ziehen, ablegen, verschieben, ändern der Größe. Es gibt auch eine Reihe von Validierungsereignissen, mit denen Sie die Aktion abbrechen können. Ereignisse werden auch ausgelöst, wenn das Steuerelement geladen wird oder den Fokus erhält.

Online-Beispiel: JavaScript-Chat-Anwendung mit dem ListView-Steuerelement
Online-Referenz: Die ListView-Klasse

JavaScript ListView: Benutzerinteraktion

Aussehen

Jedes Listenelement kann so gestaltet werden, wie Sie es möchten, und zwar bis ins kleinste Detail. Mit der CSS Class-Eigenschaft können Sie das Erscheinungsbild von Elementen an speziell für sie erstellte CSS-Stile binden. Das Steuerelement unterstützt Themen, und mit einer Reihe vordefinierter Themen können Sie direkt vom Designer erstellte Stile in verschiedenen Farbschemata anwenden.

Online-Beispiel: JavaScript ListView mit Miniaturansichten