Ich nutze normale Links als Pagebuttons. Leider schaffe ich es nicht den Link für die aktuelle Seite einzufärben (also wenn die EG-Seite ausgewählt ist diesen gelb zu färben):
<div
class="fixed navigation bg gray"
style="top: 680px; left: 40px;"
data-type="link"
data-url="#page_kg.html"
data-load="#page_kg"
data-active-pattern=".*#page_kg.html"
data-on-color="yellow"
>KG</div>
<div
class="default fixed navigation bg gray"
style="top: 680px; left: 160px; height: 70px;"
data-type="link"
data-url="#page_eg.html"
data-load="#page_eg"
data-active-pattern=".*#page_eg.html"
data-on-color="yellow"
>EG</div>
<div
class="fixed navigation bg gray"
style="top: 680px; left: 280px;"
data-type="link"
data-url="#page_og.html"
data-load="#page_og"
data-active-pattern=".*#page_og.html"
data-on-color="yellow"
>OG</div>
Im Zusammenhang mit data-active-pattern muss man diese Attribute benutzen:
data-active-color
data-active-background-color
data-active-border-color
Ok, stimmt - das ist andere Attribute. Für die Textfarbe scheint es zu funktionieren.
Ich brauche zwar tatsächlich nur die Text-Farbe, aber testweise habe ich auch den Hintergrund geändert.
Wenn ich einen Seiten-Refresh mache dann setzt er die Hintergrundfarbe auf den aktiven Pagebutton. Wenn ich jetzt aber eine andere Seite anwähle dann wird diese eingefärbt (Hitnergrund), aber die alte Seite nicht zurückgesetzt. Im Anhang kann man es hoffentlich erkennen.
<div
class="fixed navigation bg"
style="top: 680px; left: 40px;"
data-type="link"
data-url="#page_kg.html"
data-load="#page_kg"
data-active-pattern=".*#page_kg.html"
data-active-color="yellow"
data-active-background-color="green"
>KG</div>
<div
class="default fixed navigation bg"
style="top: 680px; left: 160px; height: 70px;"
data-type="link"
data-url="#page_eg.html"
data-load="#page_eg"
data-active-pattern=".*#page_eg.html"
data-active-color="yellow"
data-active-background-color="green"
>EG</div>
<div
class="fixed navigation bg"
style="top: 680px; left: 280px;"
data-type="link"
data-url="#page_og.html"
data-load="#page_og"
data-active-pattern=".*#page_og.html"
data-active-color="yellow"
data-active-background-color="green"
>OG</div>
Ist das ein Denkfehler oder ein Bug?
Das ist eine unschöne Lücke, durch einen fehlenden Default-Wert. Als Workaround hilft, data-background-color="transparent" einzubauen.
Ich habe den Default geändert. Kommt beim nächsten Update mit.
Das klappt, danke!
Hallo,
darf ich mich hier mit einer damit zusammenhängenden Frage anhängen:
Ich habe ebenfalls ein Menü aus mehreren Links, die verschiedene Seiten aufrufen. Der jeweils aktivierte Link soll eingefärbt werden.
Das vereinfachte Beispiel:
<header>Menu</header>
<div data-type="link"
data-load="#Leerseite"
data-url="#./Fr_TabletUI/Fr_Leerseite.html"
data-active-pattern=".*#./Fr_TabletUI/Fr_Leerseite.html"
data-color="lightgray" data-background-color="gray" data-border-color="lightgray"
data-active-color="yellow" data-active-background-color="#419aff"
class="round wider">Leere Seite</div>
<div data-type="link"
data-load="#Abwesenheitszeiten"
data-url="#./Fr_TabletUI/Fr_Abwesenheits-Zeiten.html"
data-active-pattern=".*#./Fr_TabletUI/Fr_Abwesenheits-Zeiten.html"
data-color="lightgray" data-background-color="gray" data-border-color="lightgray"
data-active-color="yellow" data-active-background-color="#419aff"
class="round wider default">Abwesenheits-Zeiten</div>
Das funktioniert auch alles wunderbar, wenn man die jeweilige Seite manuell über den Link anwählt. Wenn man allerdings die Seite als Default laden lässt (über class="default", letzte Code-Zeile), wird der Link NICHT als aktiv eingefärbt. Erst beim nachträglichen Anklicken des Links passiert das wieder.
Kann man es irgendwie hinbekommen, dass der Link auch dann als "aktiv" eingefärbt wird, wenn die Seite per default angezeigt wird?
Für Hinweise vielen Dank im Voraus.
Norbert