Navigationsleiste ohne buttontoPage

Question

Ich würde gerne die Navigationsleiste anlegen, ohne das die Button zum springen benutzt werden können: https://www.soscisurvey.de/help/doku.php/en:create:navigation

Ist das möglich, da buttonToPage ja eine großer Bestandteil der Navigationsleiste it.

Comments

Verstehe ich es korrekt, dass Sie einfach nur eine Anzeige haben möchten, wo im Fragebogen man gerade ist - aber ohne dass man damit wirklich navigieren könnte?

---

Ja, plus die Anzeige der Haken und Kreuze, wenn man einen Bereich ausgefüllt hat. Nur ohne die Möglichkeit zwischen den Bereichen zu springen.

Answer 1

Ganz trivial ist es nicht. Es gibt zwei Herausforderungen:

1. Der PHP-Code kann nicht ohne weiteres erkennen, auf welcher Seite er läuft - buttonToPage() erledigt das automatisch.
2. Der PHP-Code kann nicht so einfach die Beschriftung abrufen, die zu einer Seite hinterlegt ist.

Aber wenn Sie diese beiden Infos manuell übergeben, dann könnten Sie sich eine Funktion bauen, die buttonToPage() ersetzt. Das könnte z.B. so aussehen:

function navButton($titel, $cssClass) {
    return '<div class="navButton '.$cssClass.'">'.$titel.'</div>';
}

Statt z.B. der Zeile

buttonToPage('studium', NULL, NULL, ($cStudium ? 'complete' : 'incomplete'))

würden Sie dann schreiben

navButton('Studium', ($cStudium ? 'complete' : 'incomplete'))

Und außerdem müssten Sie bei der CSS-Definition button. immer durch 'div.button.` ersetzen, also statt

div.NavButtons button.complete:after { content: " \2713"; }
div.NavButtons button.incomplete:after { content: " \274C"; }
div.NavButtons button.currentPage:after { content: none; }

würden Sie schreiben

div.NavButtons div.button.complete:after { content: " \2713"; }
div.NavButtons div.button.incomplete:after { content: " \274C"; }
div.NavButtons div.button.currentPage:after { content: none; }

Außerdem müssten Sie dem Browser noch erklären, dass ein div.button als Knopf dargetellt werden soll. In Anlehnung an den CSS-Code aus der Anleitung:

div.NavButtons div.button {
  display: inline-block;
  border: 2px solid %color.4%;
  border-radius: 5px;
  padding: 7px 6px;
  margin-bottom: 8px;
  flex-grow: 1;
  margin-right: 8px;
}
div.NavButtons button.currentPage {
  background-color: %color.4%;
  color: white;
}

Jetzt fehlt nur noch die Anzeige der aktuellen Seite. Das wäre die Klasse currentPage. Dafür müssten Sie das

navButton('Studium', ($cStudium ? 'complete' : 'incomplete'))

von oben nochmal ergänzen, z.B.

navButton('Studium', ($cStudium ? 'complete' : 'incomplete').($page == 'studium' ? ' currentPage' : ''))

Und die Funktion navigation() müsste noch erfahren, was die $page ist. Also statt

function navigation() {

würden Sie schreiben

function navigation($page) {

Und im Fragebogen auf den Seiten selbst entsprechend statt

navigation();

Jeweils die Seite mit angeben, die gerade markiert werden soll, z.B.

navigation('studium');

Nicht kompliziert, aber eben viele Kleinigkeiten.

Comments

Cool, ich dachte zwar das es einfacher ist, aber ich versuche es einmal vielen Danke!