PageStepper

Das Pagestepper-Objekt erlaubt es mehrseitige Dialoge abzubilden. Der Pagestepper setzt sich dabei aus zwei Navigationselementen zusammen. Das Hauptelement ist eine Seiten-Gruppe mit den einzelnen Seiten (page), das andere Element ist eine Hilfsnavigation um das Blättern zu unterstützen.

pagestepper = new Alvine.Package.UI.Dialog.PageStepper(options);

Die über options definierbaren Werte sind der folgenden Tabelle zu entnehmen.

Schlüssel Beschreibung Default Beispiel
id undefined
aria-label undefined
class Klasse des Pagesteppers pagestepper
class-navigation Klasse der Hilfsnavigation pagination m-r-1
class-pages Klasse der Seitennavigation pagination
context-argument Name des Arguments, das über den Event in der URL gesetzt wird page
first-key Schlüssel für den Index first
first-label Bezeichnung für den Index
id ID der Zeile zufällige ID
last-key Schlüssel für den Index last
last-label Bezeichnung für den Index »|
maxpages Anzahl der Seiten pro Darstellung 10
next-key Schlüssel für den Index next
next-label Bezeichnung für den Index »
prev-key Schlüssel für den Index prev
prev-label Bezeichnung für den Index «

Im folgenden Beispiel wird ein kompletter PageStepper mit drei Einträgen und einem vor- und zurück-Button definiert.

pagestepperOptions = {};
pagestepper = new Alvine.Package.UI.Dialog.PageStepper(pagestepperOptions);

// Alle Navigationselemente aktivieren
pagestepper.initNavigation(true, true, true, true);

// Pagestepper Seiten hinzufügen (Start 0, 300 Objekte, 10 pro Seite)
pagestepper.initPages(0, 300, 10);

Pagestepper

Über die Methode PageStepper.initNavigation(hasFirst, hasPrev, hasNext, hasLast) können die Buttons für die entsprechenden Funktionen ein- (true) und ausgeblendet (false) werden. Im Standard sind die Navigationen eingeblendet. Die Methode PageStepper.initPages(startPage, totalItems, itemsPerPage) initialisiert hingegen die Buttons für die einzelnen Seiten. Die Parameter totalItems und itemsPerPage müssen nur einmal angegeben werden. bei jedem weiteren Aufruf reicht der Parameter startPage für den Offset.

PageStepper.getPageCount() liefert die Anzahl der Seiten die aktuell angezeigt werden und PageStepper.getNavigationeCount() die Anzahl der Navigations-Buttons. Mit PageStepper.addPage(link) kann man eine Seite hinzufügen und über PageStepper.addNavigation(link) kann man einen Navigationsbutton hinzufügen.

PageStepper.getIndex(index) liefert die Seite mit dem übergebenen Index zurück.

Über die Methode PageStepper.activate(index) kann ein Link aktiviert werden. Dieser Link erhält damit die Klasse active, bei allen anderen Elemente wird die Klasse active zurückgesetzt.

Hinweis

Werden mehrere unabhängige Pagestepper auf einer Seite verbaut, so müssen unterschiedliche Kontext-Argumente context-argument für jeden Pagestepper vergeben werden.

Vorgefertigte Eventhandler

Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.

Click-Handling

Dieser Eventhandler verarbeitet Clicks auf den Pagestepper.

// Klick-Events des Pagesteppers
 view.on('click touch', '.pagestepper .page-link', Alvine.Package.UI.Dialog.PageStepper.eventHandlerOnClick);

Die einzelnen Links eines Pagesteppers sind als PageStepperLink(url, label, options) Objekt abgebildet.

new Alvine.Package.UI.Dialog.PageStepperLink('#1', '1', {'class':'page-item active'})

Die Optionen sind der folgenden Tabelle zu entnehmen.

Schlüssel Beschreibung Default Beispiel
class Klasse des Links page-item page-item active
label Bezeichnung des Links .
screenreader-label Label zur Darstellung im Screenreader .
url URL auf die gezeigt werden soll #