Anzeige aktiver Menüpunkte

[wvhn]

Hallo zusammen,

animiert durch diesen Thread von ares72 habe ich mir die Darstellung aktiver Menüpunkte mal genauer angesehen. jQuery mobile macht das leider nicht sehr konsistent. Insbesondere ändert es die Anzeige, sobald man einen bereits aktiven Menüpunkt nochmal anwählt. Das habe ich jetzt durch Workarounds abgestellt und folgende Standards festgelegt:

1. Navbars:
Für Menüpunkte, die als aktiv angezeigt werden sollen, muss die Klasse „ui-btn-active“ eingetragen werden. Das war bisher schon so. jQm stellt dann die Schaltfläche nur beim ersten Aufruf als aktiv dar, wenn nicht zusätzlich die Klasse „ui-state-persist“ angegeben wird. Das ist jetzt im Beispiel „example1.smarthome“ eingepflegt. Ein neuer Event-Handler in der root.html sorgt außerdem dafür, dass die Darstellung bei Auswahl einer bereits aktiven Schaltfläche erhalten bleibt.

navbar.gif
Ohne die Klassen "ui-btn-active ui-statepersist" bleiben die Schaltflächen "dunkel".


2. Listviews (Standard Raum-Menü in smartVISU)
Anders als bei den Navbars sollen die Menüpunkte des Raummenüs nicht als aktiv dargestellt werden, da dies die Lesbarkeit von Symbolen in der Schaltfläche verschlechtert. Das ist in smartVISU schon umgesetzt, aber jQm setzt die Klasse "ui-btn-active" nicht korrekt zurück, wenn man die Schaltfläche der bereits aktiven Seite am Rand anklickt. Ein neuer Eventhandler in der root.html korrigiert dies.

Bisher: .................................................. ......................... Neu:
listview_old.giflistview_new.gif

Die Lösung ist jetzt im Develop. Für Tester wäre ich dankbar!

Gruß
Wolfram

[wvhn]

Nachtrag:

Um in Navbars zusätzlich zur Beschriftung auch Icons zu verwenden, definiert man diese in der jeweiligen Seite per <style>-Tag mit dem Pseudoelement ":after". Wie in example1.smarthome gezeigt, lautet dies zum Beispiel:

<style>
    ...
    #essen:after {
        background-image: url("{{ icon0 }}scene_dinner.svg");
    }
    ...
</style>

Dabei werden die Icon-Farben fest eingestellt, denn {{ icon0 }} wird durch den im Design vorgegebenen Icon-Ordner ersetzt. In manchen Designs wechselt die Schriftfarbe aber bei aktiven Schaltflächen, z.b. bei Ice oder Greenhornet. DIe Icons werden dabei leider nicht beeinflusst.

Abhilfe kann man in der eigenen visu.css schaffen, indem man für Icons in aktiven Schaltflächen den passenden Ordner setzt: "icons/sw" für schwarz und "icons/ws" für weiß:

  
#essen.ui-btn-active:after {
     background-image: url('../../icons/sw/scene_dinner.svg');
}

Eine allgemeingültige Lösung wäre natürlich schöner und ich schaue mir das auch nochmal an, aber ein Umbau dürfte ein größerer Aufwand sein.

Gruß
Wolfram

[ares72]

Hallo Wolfram,

ich bin noch auf v3.2.0 und habe pages/base/root.html mit der develop-Version ersetzt.
(zu #2) Ich erkenne aber im Raum-Menü keinen Unterschied.
(zu #1) Auch in meinen Navbars (Code siehe Link in Deinem ersten Post) soll analog dem Raum-Menü die aktive Seite durch einfärben des Icon kenntlich gemacht werden. Dass es hier nicht funktioniert liegt wahrscheinlich an meiner für mich übersichtlicheren Version, da diese näher am Aufbau der Raum-Menüs ist. Da ich bei Forum keinen Unterschied erkenne habe ich mir aber die Mühe eines Umbaus nicht gemacht. In meiner vereinfachten Denkweise waren die Navbars nur ein "zweites waagrechtes Raum-Menü zum eigentlichen Raum-Menü" und es werden beim Klicken nur andere Seiten angezeigt (und im Raum-Menü daher keine Auswahl mehr).

Viele Grüße
Manfred

[wvhn]

Hi Manfred,

Du siehst von den Änderungen nichts, weil Du Anpassungen in der darkblue.css gemacht hast, die für aktive Menüpunkte dieselben Einstellungen vorgeben, wie für inaktive.
Mit den o.g. Lösungen sind solche CSS-Anpassungen nicht mehr nötig.

Gruß
Wolfram

[ares72]

Hallo Wolfram,

das hatte ich so verstanden und mich erstmal riesig gefreut, dass Du Dir die ganze Mühe machst.

Ich habe daher (soeben erneut) in v3.2.0:
(1) die gesicherte Originaldatei darkblue.css wiederhergestellt
(2) die Version in pages/base mit https://raw.githubusercontent.com/Ma...base/root.html ersetzt
(3) in meiner Page gibt's kein root.html
(4) in Chrome mit STRG-F5 aktualisiert
(5) Raum rechts ausgewählt
(6) Raum links am Rand angeklickt
(7) Ergebnis war die Version "bisher" > Darkblue zeigt einen blauen Hintergrund mit identischer Iconfarbe, sodass das Icon unsichtbar ist

Fehlt da noch was bei mir?

Viele Grüße
Manfred

[wvhn]

Hi Manfred,

Du hast leider recht. Ich habe das gestern stundenlang getestet, aber jetzt funzt es bei den Listviews nicht mehr. Ich hab schon eine Alternative, die ich kurzfristig ins Develop schiebe.

Bei den Navbars klappt es aber mit dem Eventhandler.

Gruß
Wolfram

P.S.: neue Version ist im Develop