320NN Development Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
===== Bootstrap Menü mit Headlines =====

Anmerkung: Leider kann es sein, dass die Templates bei Wayfinder manchmal nicht korrekt geladen werden. Dann bitte alle Aufrufe, die geladen werden mal eben aus dem Wayfinder-Call rausnehmen; Chunk speichern; im Debug-Modus testen - wenn der Chunk des Untertemplates dann richtig geladen wird - die zuerst geladenen Chunkaufrufe wieder reinnehmen; jetzt sollten alle geladen werden.

[[http://www.strassenbahnfreunde-hemer.de|Website der Straßenbahnfreunde Hemer]]

==== Wayfinder Call ====

Ein ganz einfacher Wayfinder-Call. Bei der Benennung der Templates habe ich mich an das originale Wayfinder-Schema gehalten.

<code HTML>
[[Wayfinder?
 &startId=`0`
 &level=`2`
 &rowTpl=`rowTpl`
 &outerTpl=`outerTpl`
 &innerTpl=`innerTpl`
 &innerRowTpl=`innerRowTpl`
 &innerHereTpl=`innerHereTpl` 
]]
</code>

==== rowTpl ====

Da es auf der Seite 6 Bereiche gibt, passt die Bootstrap-Rasteraufteilung mit 6 Spalten zufällig ganz gut. Dies nach eigenem Belieben anpassen.

<code HTML>
<article class="col-md-2">
<h4 class="[[+wf.classnames]]"><a href="[[+wf.link]]">[[+wf.linktext]]</a></h4>
[[+wf.wrapper]]
</article>
</code>

Die obersten Ebenen werden mit h4 abgebildet - der wf.wrapper Aufruf lädt die Submenüs der Ebene 2.

==== outerTpl ====

In der OuterTpl steht nur ein Call - der zum Laden des Menüs. Die Anlage dieses Elements ist notwendig, um das Laden einer umklammernden ul zu verhindern.

<code HTML>
[[+wf.wrapper]]
</code>

==== innerTpl ====

Nur eine kleine Ergänzung einer eigenen Klasse.

<code HTML>
<ul class="ft-menu [[+wf.classnames]]">[[+wf.wrapper]]</ul>
</code>

==== innerrowTpl ====

<code HTML>
<li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
</code>

==== innerhereTpl ====

Die innerhereTPL habe ich später noch ergänzt. In dieser gibt es noch ein vorgestelltes Sonderzeichen für das aktive Element.

<code HTML>
<li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
</code>