Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

webedition:code-examples:navigation:start

Navigation

Die mit den Navigationstool erstellten Navigationsstrukturen können mit folgenden Tags ausgegeben werden:

we:tag Zweck
<we:navigation> Initialisiert die Navigation
<we:navigationEntry> Steuert die Ausgabe der Einträge
<we:navigationEntries> Gibt die im aktuellen Navigationspunkt enthaltenen Einträge aus
<we:navigationField> Gibt den Wert eine Navigationsfeldes aus (z.B. Titel)
<we:navigationWrite> Gibt die generierte Navigationsstruktur aus

Wichtig zu verstehen ist, dass die Navigation aus Definitionen für verschiedene Zustände dynamisch zusammengebaut wird. Die Ausgabe der Navigationseinträge wird dabei über das Tag <we:navigationEntry> entweder global oder für definierte Zustände (z.B. aktiver Navigationseintrag der 1. Ebene) festgelegt (sh. Code-Beispiel 2).

Im Menü "Module" → "Navigation" wir die Navigationsstruktur angelegt. Über den Reiter "Vorschau" kann die Navigation und der generierende Code angezeigt werden.

Beispiele

Einfache Navigation

Der Code im folgenden Beispiel gibt nur Navigationseinträge (Ordner) der ersten Ebene aus.

Beispiel #1: Einfache Navigation

<we:comment> Navigation "navMain" initialisieren <we:comment>
<we:navigation navigationname="navMain" parentid="\$n_main"/>
 
<we:comment> Ausgabe des aktiven Navigationelements in der ersten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="1" current="true">
    <li>
        <a class="is-active" href="<we:navigationField name="href"/>">
            <we:navigationField name="text"/>
        </a>
    </li>
</we:navigationEntry>
 
<we:comment> Ausgabe der inaktiven Navigationelemente in der ersten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="1" current="false">
    <li>
        <a href="<we:navigationField name="href"/>">
            <we:navigationField name="text"/>
        </a>
    </li>
</we:navigationEntry>
 
<we:comment> Generierte Navigation ausgeben <we:comment>
<we:navigationWrite navigationname="navMain"/>
\$n_main steht für den übergeordneten Navigationseintrag und muss vorab definiert werden. Wird parentid nicht gesetzt, werden die Einträge aus der obersten Navigationsebene (id="0") ausgegeben.

Zweistufige Navigation

Um im aktiven Navigationspunkt der ersten Ebene die zweite Navigationsebene auszugeben, muss das Beispiel von oben wie folgt erweitert werden.

Beispiel #2: Zweistufige Navigation

<we:comment> Navigation "navMain" initialisieren <we:comment>
<we:navigation navigationname="navMain" parentid="\$n_main"/>
 
<we:comment> Ausgabe des aktiven Navigationelements in der ersten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="1" current="true">
    <li>
        <a class="is-active" href="<we:navigationField name="href"/>">
            <we:navigationField name="text"/>
        </a>
    </li>
 
    <we:comment> Navigationspunkte der 2. Ebene ausgeben </we:comment>
    <ul class="nav_submenu"><we:navigationEntries /></ul>
</we:navigationEntry>
 
<we:comment> Ausgabe der inaktiven Navigationelemente in der ersten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="1" current="false">
    <li>
        <a href="<we:navigationField name="href"/>">
            <we:navigationField name="text"/>
        </a>
    </li>
</we:navigationEntry>
 
<we:comment> Ausgabe des aktiven Navigationelements in der zweiten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="2" current="true">
    <li>
        <a class="is-active" href="<we:navigationField name="href"/>">
            <we:navigationField name="text"/>
        </a>
    </li>
</we:navigationEntry>
 
<we:comment> Ausgabe der inaktiven Navigationelemente in der zweiten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="2" current="false">
    <li>
        <a href="<we:navigationField name="href"/>">
            <we:navigationField name="text"/>
        </a>
    </li>
</we:navigationEntry>
 
<we:comment> Generierte Navigation ausgeben <we:comment>
<we:ifHasCurrentEntry>
    <we:navigationWrite navigationname="navMain"/>
</we:ifHasCurrentEntry>

Mehrstufige Navigation

Um eine einfache mehrstufige Navigation zu definieren, kann folgender Code verwendet werden:

Beispiel #3: Mehrstufige Navigation

<we:comment> Navigation "navMain" initialisieren <we:comment>
<we:navigation navigationname="navMain" parentid="\$n_main"/>
 
<we:comment> Ausgabe des aktiven Navigationelements für alle Ebenen <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" current="true">
    <li>
        <a class="is-active" href="<we:navigationField name="href"/>">
            <we:navigationField name="text"/>
        </a>
    </li>
 
    <we:comment> Navigationspunkte der untergeordneten Ebene ausgeben </we:comment>
    <ul class="nav_submenu"><we:navigationEntries /></ul>
</we:navigationEntry>
 
<we:comment> Ausgabe der inaktiven Navigationelemente für alle Ebenen <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" current="false">
    <li>
        <a href="<we:navigationField name="href"/>">
            <we:navigationField name="text"/>
        </a>
    </li>
</we:navigationEntry>
 
<we:comment> Generierte Navigation ausgeben <we:comment>
<we:navigationWrite navigationname="navMain" depth="4"/>
Über das Attribut depth="4" in <we:navigationWrite/>, wird die Ausgabe auf maximal 4 Navigationsebenen beschränkt.
webedition/code-examples/navigation/start.txt · Zuletzt geändert: 2018/11/05 22:12 von Sascha Nemecek

Recent changes RSS feed