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