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
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);

PageStepperLink¶

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	#