Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende Überarbeitung | Nächste ÜberarbeitungBeide Seiten der Revision | ||
de:create:functions:buttontopage [21.07.2016 23:32] – [Beispiel 3] admin | de:create:functions:buttontopage [14.03.2019 12:52] – Neues Beispiel: Navigation leiner | ||
---|---|---|---|
Zeile 109: | Zeile 109: | ||
- | ===== Beispiel: | + | ===== Mehrsprachige Beschriftung ===== |
In einem mehrsprachigen Fragebogen ([[: | In einem mehrsprachigen Fragebogen ([[: | ||
Zeile 146: | Zeile 146: | ||
' | ' | ||
); | ); | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Navigation im Fragebogen ===== | ||
+ | |||
+ | Der Fragebogen soll nicht (unbedingt) linear bearbeitet werden? Mit '' | ||
+ | |||
+ | Als Vorbereitung geben Sie allen Seiten, auf denen ein Abschnitt beginnt, unter **Fragebogen zusammenstellen** eine [[de: | ||
+ | |||
+ | Es gibt zwei Möglichkeiten, | ||
+ | |||
+ | - Verwenden Sie Platzhalter und verwenden Sie diese direkt im **Fragebogen-Layout** -> // | ||
+ | - Platzieren Sie den PHP-Code für die Navigation auf jeder Seite des Fragebogens, | ||
+ | |||
+ | <code php> | ||
+ | html( | ||
+ | // Ein <div> sorgt für die optische Abgrenzung zwischen Navigation und Seiteninhalt | ||
+ | '< | ||
+ | // Ein weiteres <div> erlaubt die flexible Anordnung der Navigations-Schaltflächen | ||
+ | '< | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | buttonToPage(' | ||
+ | '< | ||
+ | buttonToPage(' | ||
+ | '</ | ||
+ | '</ | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | Möchte man die Knöpfe noch ein wenig ansprechender gestalten, kann man im **Fragebogen-Layout** in der // | ||
+ | |||
+ | <code css> | ||
+ | div.navButtons button { | ||
+ | border: 2px solid %color.4%; | ||
+ | border-radius: | ||
+ | padding: 7px 6px; | ||
+ | margin-bottom: | ||
+ | flex-grow: 1; | ||
+ | margin-right: | ||
+ | } | ||
+ | div.navButtons button.currentPage { | ||
+ | background-color: | ||
+ | color: white; | ||
+ | } | ||
</ | </ |