Hauptinhalt

Chronik

letzte Aktualisierung der Seite: Version 2.17.1

Die Chronik-Komponente dient der Darstellung einer zeitlichen Abfolge von Ereignissen. Sind die Ereignisse nach Datum sortierbar, kann die Chronik-Komponente so konfiguriert werden, dass die Ereignisse chronologisch sortiert dargestellt werden. Informationen zur Gestaltung eines Akkordeons sind zu finden unter: Chronik

JavaScript-Einbindung

Quellcode

window.additionalComponent.load('chronik', {
    el: '[data-component="51684684964"]'
});

Parameter und Attribute

Funktionsaufruf - Zeile 3:

Name Bedeutung Werte Obligatorisch
data-component Selector des HTML-Knotens, an dem die Chronik-Komponente initialisiert wird. textuell, frei definierbar JA

 

HTML-Einbindung

Quellcode

<div class="chronik-wrapper"
     data-element="chronik-wrapper"
     data-selected=""
     data-absolute
     data-absolute-before="#page-title"
     data-absolute-after="#page-title"
     data-absolute-margin="280px">
 
    <script id="chronik36542"
            data-src="//www.sachsen.de/js/beispiel_chronik.js"
            data-component="51684684964"/>
</div>

Parameter und Attribute

DIV-Tag - Zeile 1:

Name Bedeutung Werte Obligatorisch
class

Der Wert chronik-wrapper muss immer angegeben werden. Es gibt jedoch noch einen weiteren Wert, der optional verwendet werden kann:

Oberhalb der Chronik wird standardmäßig eine Datumsauswahl angezeigt. Hiermit wird es möglich einen Direkteinsprung auf Chronikeinträge zu erhalten. Die Datumsauswahl kann jedoch auch unerwünscht sein. Um diese auszublenden, ist dem class-Attribut der Wert no-calender hinzuzufügen.

 CSS-Regel JA
data-element Name des Elements, auf das JavaScript-Funktionalitäten aufgerufen werden. chronik-wrapper JA
data-selected

Gibt den Datensatz anhand einer GUID an, der vorausgewählt werden soll. Fehlt die Angabe, so wird der aktuellste Eintrag ausgewählt.

 GUID der den Datensatz identifiziert NEIN
data-absolute Gibt an, ob die Chronik-Komponente absolut oder relativ platziert werden soll. Hat keinen Wert NEIN
data-absolute-before Gibt an, vor welchen HTML-Knoten die Chronik absolut eingehängt werden soll. Kann nicht zusammen mit data-absolute-after verwendet werden. ID eines HTML-Elements NEIN
data-absolute-after Gibt an, nach welchen HTML-Knoten die Chronik absolut eingehängt werden soll. Kann nicht zusammen mit data-absolute-before verwendet werden. ID eines HTML-Elements NEIN
data-absolute-margin Gibt den Abstand ein, den die Chronik zu dem unter data-absolute-before angegebenen Element haben soll. nummerischer Wert NEIN

SCRIPT-Script - Zeile 8:

Name Bedeutung Werte Obligatorisch
data-src Vollquaifizierte URL, unter der die Quelldatei abgerufen werden soll. URL JA
data-component Dient der Identifikation mittels JavaScript und muss dem Wert data-component aus dem JavaScript-Code entscodechen. alphanumerischer Wert JA

 

Abhängigkeiten

  • jQuery
  • webs-ot-utils
  • malihu
  • jQuery-UI

Definition der Quelldatei

Die Quelldatei ist eine JavaScript-Funktion, die ein JSON zurückliefert. Die Quelldatei weist folgende Definition auf:

chronikData = function () {
    return {
        /* Gibt an ob die Elemente bereits sortiert sind (true) oder nicht (false). Will man eine Sortierung nach dem Knoten 'date', muss damit also false ausgewählt werden.  */
        "sorted" : true | false,
        /* Beinhaltet ein Array von Bildpfaden, die als Hintergrund je Breakpoint dient.*/
        "img": [
            "./img/content/880_chronik.jpg",
            "./img/content/730_chronik.jpg",
            "./img/content/708_chronik.jpg",
            "./img/content/680_chronik.jpg"
        ],
        /* Beinhaltet ein Array mit Elementen die anzeigt werden sollen. Ein Array-Element stellt ein Chronik-Element dar.*/
        "data" : [
            {
                /* Beliebige Zeichenkette zur eindeutigen Identifikation des Datensatzes */
                "guid" : "",
                /* Sollen die Einträge sortierbar sein, dann muss hier ein valides Datum im Format: DD.MM.YYYY eingegeben werden*/
                "date" : "DD.MM.YYYY",
                /* Im Chronik-Element anzuzeigender Text */
                "text" : "Anzuzeigender Text",
                /* Alternativtext */
                "alt_text" : "Alternativer Anzeigetext",
                /* relative URL die mit dem Klick auf das Chronik-Element aufgerufen wird. Wird diese zusammen mit Externen-URL genutzt, so wird die Externe-URL genutzt */
                "url" : "/example.htm",
                /* vollqualifizierte URL die aufgerufen wird. Wird diese zusammen mit URL genutzt, so wird die Externe-URL genutzt. */
                "url_extern" : "http://www.sachsen.com",
                /* gibt an, wo der Link geöffnet wird, analog zur Target-Attribut des HTML HREF-Knotens*/
                "target" : "_blank"
            }, {
                ...
            },
            null
        ]
    };
};
zurück zum Seitenanfang