FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: oeiber am 12 Oktober 2016, 16:40:03

Titel: FTUI 2.2 mit Slideout-Widget in deiner Single-Page
Beitrag von: oeiber am 12 Oktober 2016, 16:40:03
Hallo Zusammen,

ich habe versucht, FTUI mit dem Slideout-Widget in einer Single-Page zu integrieren.
Ich wollte somit das Ladeverhalten verbessern (ähnlich prefetch).

Allerdings wird mir leider kein Content in den Sub-Pages angezeigt.

Hat jemand eine Idee, wie man das lösen könnte?


Hier ein Auszug der HTML:



<main id="panel" class="">
        <div class="page" id="wohnzimmer">
        <section>
            <div class="medium col-1-3 left-align middle">Fernseher und Soundbar</div>
            <div class="col-1-3"></div>
            <div data-type="switch" data-device="STD01"
                 class="small thin col-1-3 center-align middle"></div>
        </section>
        <section>
            <div class="medium col-1-3 left-align middle">Apple TV und Blu-Ray</div>
            <div class="col-1-3"></div>
            <div data-type="switch" data-device="STD02"
                 class="small thin col-1-3 center-align middle"></div>
        </section>
...
</div>
</div>
</main>
...
<nav id="menu">
        <div data-type="link" class="default medium top-space-2x left-space-2x"
            data-width="140"
            data-icon-left="fa-television"
            data-color="white"
            data-text-align="left"
            data-load="#wohnzimmer"
            data-url="#wohnzimmer"
            data-active-color="#0088cc"
            data-active-pattern="(.*/|.*#wohnzimmer)">Wohnzimmer</div>
...
</nav>


Wenn ich bei "data-url" anstatt "#wohnzimmer" "##wohnzimmer" eintrage, funktioniert es tadellos.

Ich bin mir aber nicht sicher, ob das im Sinne aller Browser und der HTML-Spezifikation ist  ;-)


Herzlichen Dank für Eure Unterstützung!
Titel: Antw:FTUI 2.2 mit Slideout-Widget in deiner Single-Page
Beitrag von: setstate am 12 Oktober 2016, 17:26:29
In der Hauptseite und in der Seite, die Nachgeladen wird, muss ein

<div class="page" id="wohnzimmer">

zu finden sein, damit sich beide Teile finden.
Titel: Antw:FTUI 2.2 mit Slideout-Widget in deiner Single-Page
Beitrag von: oeiber am 12 Oktober 2016, 17:31:26
ich glaube wir reden aneinander vorbei: ich versuche jeglichen content in der index.html unterzubringen.
Titel: Antw:FTUI 2.2 mit Slideout-Widget in deiner Single-Page
Beitrag von: setstate am 12 Oktober 2016, 22:16:19
okay , verstanden ...
Anbei eine Demo-Seite.

Ein kleines Problem gab es aber noch, dass das Link-Widget die Default Page immer von Extern laden  will. Das habe ich jetzt noch verbessert.
Titel: Antw:FTUI 2.2 mit Slideout-Widget in deiner Single-Page
Beitrag von: oeiber am 13 Oktober 2016, 11:01:10
super, danke!

werd ich heute abend mal testen.

;D
Titel: Antw:FTUI 2.2 mit Slideout-Widget in deiner Single-Page
Beitrag von: oeiber am 13 Oktober 2016, 16:49:47
Funktioniert prima!
Danke dafür!

Mir ist nur noch eine Kleinigkeit aufgefallen: Wenn mann die Seite mit Hashtag aufruft (z.B. http://fhemserver/index.html#wohnzimmer), dann wird die erste Zeile (section) nicht angezeigt. Man muss nach oben scrollen um sie zu sehen.
Titel: Antw:FTUI 2.2 mit Slideout-Widget in deiner Single-Page
Beitrag von: oeiber am 14 Oktober 2016, 09:15:52
Wenn ich in der Navifation auf "Content 3" klicke und dann im Browser einen Reload mache, werden "Content 1" und "Content 2" auf der Seite angezeigt.

Mache ich etwas falsch?