Hauptinhalt

ISSUU

letzte Aktualisierung der Seite: Version 2.18.0

Diese Komponente stellt eine Anbindung an den Dienst ISSUU (https://issuu.com/) bereit und damit die Darstellung von Online-Veröffentlichungen. Der Quellcode zum Einbinden einer Veröffentlichung kann direkt von ISSUU entnommen werden und muss in den Rahmen des Styleguides eingebettet werden.

JavaScript-Einbindung

Quellcode

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

Parameter und Attribute

Funktionsaufruf - Zeile 3:

Name Bedeutung Wert Obligatorisch
data-component Attribut des HTML-Knotens, an dem die ISSUU-Komponente initialisiert wird. alphanumerischer Wert JA

 

HTML-Einbindung

Quellcode

<div class="box box-loading" data-element="social-media-wrapper">
    <h2 class="box-header">Überschrift</h2>
    <div class="box-dropdown dropdown"
        data-element="box-dropdown"
        id="dropdownMenuWrapper-6841435446">
        <button class="btn btn-default dropdown-toggle" type="button"
            id="dropdownMenu-6841435446"
            data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false"
            data-for-id="issuu-embed">
            Issuu wechseln
        </button>
        <ul class="dropdown-menu list-unstyled"
            aria-labelledby="dropdownMenu-6841435446" >
            <li>
                <a
                    href='#dropdownMenu-6841435446'
                    data-element='dropdown-value'
                    data-id='2250712/8898607'
                    data-value='https://issuu.com/chickpeamag/docs/23_free_preview'
                    data-additional='Issuu Dokument'>
                    Issuu Dokument
                </a>
            </li>
        </ul>
    </div>
    <div class="box-body">
        <div class="box-media">
            <div
                data-social-platform="issuu"
                data-issuu-id="issuu-embed"
                data-component="686871689">
            </div>
        </div>
    </div>
</div>

Parameter und Attribute

DIV-Tag - Zeile 1

Name Bedeutung Wert Obligatorisch
data-element CSS-Klasse, gibt den Rahmen für die SocialMedia-Komponente vor. Innerhalb dieses Rahmens findet die SocialMedia-Anzeige und -Interaktion statt. social-media-wrapper JA

DIV-Tag - Zeile 3

Name Bedeutung Wert Obligatorisch
data-element Name der Auswahlbox. Dieser wird benötigt, um die Auswahlbox mit Einträgen zu füllen. Weiterhin wird die Auswahl dazu verwendet, um die Informationen aus dem SocialMedia-Kanal abzurufen. box-dropdown JA

BUTTON-Tag - Zeile 6

Name Bedeutung Wert Obligatorisch
data-toggle Darstellungsweise des Button-Elements als Auswahlbox. dropdown JA
data-for-id Gibt das Element an, auf das sich der Button hinsichtlich der Datendarstellung/ -aktualisierung bezieht. issuu-embed JA

DIV-Tag - Zeile 29

Name Bedeutung Wert Obligatorisch
data-social-platform Name der SocialMedia-Plattform. issuu JA
data-issuu-id Dieser Wert muss dem Wert des Attributs data-for-id des Auswahlboxbereichs BUTTON entscodechen. issuu-embed JA
data-component Dient der Identifikation mittels JavaScript und muss dem Wert data-component aus dem JavaScript-Code entscodechen. alphanumerischer Wert JA

Tastaturbedienung

Tastenbefehle für Bedienung von ISSUU
Taste Funktion
Pfeiltasten links/rechts zurück/vorwärts blättern
Pfeiltasten oben/unten zurück/vorwärts blättern
F Vollbild aufrufen
Escape Vollbild verlassen
zurück zum Seitenanfang