Tablet UI PageTab nur mit gridster möglich?

aviator · 23 September 2019, 08:14:40

Moin

ich hatte das PageTab Widget zuvor erfolgreich benutzt und möchte jetzt gerne das Bulma CSS Framework https://bulma.io/ nutzen. Allerdings bekomme ich jetzt keine Seiten mehr angezeigt (außer der Index Seite natürlich). In der Konsole sehe ich, dass meine erste Seite (pagetab01.html) durchaus nachgeladen wird, allerdings nicht angezeigt.
Meine Frage ist also, funktioniert das PageTab Widget nur mit dem gridster Layout oder hat jemand anderes schon soetwas ähnliches gemacht wie ich? Muss ich evtl. besondere Klassennamen hier und da einfügen oder id-Attribute?
Danke für eure Hilfe im Voraus.

Nicholas

index.html

Code Auswählen


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="debug" content="1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Cache-Control" content="no-store" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/bulma.min.css" type="text/css">
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="tile is-ancestor">
        <div class="tile is-2">
            <div class="tile is-parent is-vertical">
                <article class="tile is-child">
                    <div data-type="clock" data-format="H:i:s"></div> local
                </article>
                <article class="tile is-child notification">
                    <div data-template="menu.html"></div>
                </article>
            </div>
        </div>
    </div>
</body>

</html>

menu.html

Code Auswählen

<html>

<body>
    <div class="cell">
        <div data-type="pagetab" data-url="pagetab01.html" data-icon="fa-home" data-text="HOME"></div>
        <div data-type="pagetab" data-url="pagetab02.html" data-icon="fa-home" data-text="ELEC"></div>
    </div>
</body>

</html>

aviator · 23 September 2019, 08:56:18

Ich weiß es!

Fast. Ich nutze jetzt das Widget Link https://wiki.fhem.de/wiki/FTUI_Widget_Link und lade die Inhalte dann in den entsprechenden Container mit der passenden ID. Noch als Hinweis: um ein ähnliches Verhalten wie bei PageTab zu bekommen, sollte die CSS Klasse 'nocache' benutzt werden. Ansonsten wird der Inhalt eines Containers nicht erneut geladen, bzw. ersetzt. Auch wichtig: in der subpage HTML Datei muss der anzuzeigende Content ebenfalls in ein Container mit der gleichen ID eingebettet sein.
Danke für FHEM.

Falls es trotzdem eine Lösung für das o.g. Problem gibt, wäre eine Antwort hierzu natürlich sinnvoll (daher auch nicht 'gelöst').

FHEM Forum

Tablet UI PageTab nur mit gridster möglich?

aviator

aviator