Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Letzte Überarbeitung Beide Seiten der Revision
de:create:functions:buttontopage [21.07.2016 23:32]
admin [Beispiel 3]
de:create:functions:buttontopage [14.03.2019 12:52]
leiner Neues Beispiel: Navigation
Zeile 109: Zeile 109:
  
  
-===== Beispiel: ​Mehrsprachige Beschriftung =====+===== Mehrsprachige Beschriftung =====
  
 In einem mehrsprachigen Fragebogen ([[:​de:​create:​multilang]]) müssen die Beschriftungen der Knöpfe je nach Sprachversion angepasst werden. Dafür kann dem zweiten Parameter ein Array übergeben werden. In einem mehrsprachigen Fragebogen ([[:​de:​create:​multilang]]) müssen die Beschriftungen der Knöpfe je nach Sprachversion angepasst werden. Dafür kann dem zweiten Parameter ein Array übergeben werden.
Zeile 146: Zeile 146:
   '​%btnC3%'​   '​%btnC3%'​
 ); );
 +</​code>​
 +
 +
 +===== Navigation im Fragebogen =====
 +
 +Der Fragebogen soll nicht (unbedingt) linear bearbeitet werden? Mit ''​buttonToPage()''​ lässt sich auch eine umfangreiche Navigation realisieren.
 +
 +Als Vorbereitung geben Sie allen Seiten, auf denen ein Abschnitt beginnt, unter **Fragebogen zusammenstellen** eine [[de:​glossary#​seitenkennung|Seiten-Kennung]] und tragen Sie als Kommentar für die Seite einen Titel für den Abschnitt ein, wie er in der Navigation erscheinen soll.
 +
 +Es gibt zwei Möglichkeiten,​ die Navigation auf allen Seiten anzuzeigen:
 +
 +  - Verwenden Sie Platzhalter und verwenden Sie diese direkt im **Fragebogen-Layout** -> //​HTML-Vorlage//​ vor dem Platzhalter ''​%questionnaire%''​ -- dann muss der PHP-Code mit ''​buttonToPage()''​ nur einmal auf der ersten Seite des Fragebogens platziert werden, aber die aktuelle Seite kann bei dieser Lösung nicht farblich hervorgehoben werden.
 +  - Platzieren Sie den PHP-Code für die Navigation auf jeder Seite des Fragebogens,​ z.B. oben auf jeder Seite. Nachfolgend ein Beispiel, wie der PHP-Code dafür aussehen könnte:
 +
 +<code php>
 +html(
 +  // Ein <div> sorgt für die optische Abgrenzung zwischen Navigation und Seiteninhalt
 +  '<​div style="​border:​ 2px solid #CCCCCC; border-left:​ 0 none; border-right:​ 0 none; padding: 20px 0 12px 0; margin-bottom:​ 3em;">'​.
 +  // Ein weiteres <div> erlaubt die flexible Anordnung der Navigations-Schaltflächen
 +  '<​div class="​s2flex navButtons"​ style="​flex-wrap:​ wrap; margin-right:​ -8px">'​.NL.
 +  buttonToPage('​start'​).
 +  buttonToPage('​kontakt'​).
 +  buttonToPage('​studium'​).
 +  buttonToPage('​leistungen'​).
 +  buttonToPage('​dokumente'​).
 +  buttonToPage('​notizen'​).
 +  '<​div style="​width:​ 2em;"></​div>'​.
 +  buttonToPage('​abschicken'​).
 +  '</​div>'​.
 +  '</​div>'​
 +);
 +</​code>​
 +
 +Möchte man die Knöpfe noch ein wenig ansprechender gestalten, kann man im **Fragebogen-Layout** in der //​HTML-Vorlage//​ im ''<​style>''​-Bereich noch ein wenig CSS-Code ergänzen:
 +
 +<code css>
 +div.navButtons button {
 +  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;
 +}
 </​code>​ </​code>​
de/create/functions/buttontopage.txt · Zuletzt geändert: 14.03.2019 12:54 von leiner
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki