Hallo zusammen,
ich habe ja nun schon erste Kleinigkeit in FTUI hinbekommen.
Bei dem Menü verzweifele ich aber gerade und finde auch keine wirkliche Beschreibung oder ein Beispiel.
Was ich erstellen möchte:
Ich hätte gerne ein Menüband links und ein Menüband oben.
In der oberen linken Ecke soll eine Uhr erscheinen.
In dem verbleibenden unteren rechten Teil sollen die Seiteninhalte, die durch das Menü ausgewählt wurden, angezeigt werden.
Nun habe ich versucht, zunächst das linke Menü beispielhaft zu erstellen:
<li data-row="13" data-col="1" data-sizex="4" data-sizey="10">
<div class="cell">
<div data-type="pagebutton"
data-url="STK_Home.html"
data-load="#content1"
data-off-background-color="transparent"
data-off-color="#606060"
data-on-background-color="#606060"
data-on-color="#222222"
data-active-pattern="(.*/||.*index_page_left_demo.html||.*STK_Home.html)"
data-icon="fa-home"
class="default top-space">
</div>
<div data-type="pagebutton"
data-url="STK_Inhalt1.html"
data-load="#content2"
data-off-background-color="transparent"
data-off-color="#606060"
data-on-background-color="#606060"
data-on-color="#222222"
data-active-pattern=".*STK_Inhalt1.html"
data-icon="fa-music"
class="default top-space">
</div>
</div>
</li>
<li data-row="13" data-col="2" data-sizex="11" data-sizey="10">
<div class="page" id="content1"></div>
<div class="page" id="content2"></div>
</li>
Dabei war meine Hoffnung, dass die Page-Buttons den Inhalt der angegebenen html-Seite in der jeweiligen "page" anzeigen. Und da alle pages in dem gleichen Feld stehen, erscheint dort immer das zuletzt ausgewählte.
Das ist leider nicht so :( .
Daher meine Fragen:
- Ist mein Vorgehen grundsätzlich richtig?
- Wie muss die html-Datei aussehen, die in der page angezeigt wird. Muss dort auch wieder alles eingebunden werden oder reichen dort nur die <li>-Elemente.
Würde mich freuen, wenn ihr mich auf den richtigen Pfad der Menü-Erstellung schupsen könntet ;).
Vielen Dank und viele Grüße
Stephan
Die Subpages brauchen keinen eigenen Header mehr. Wichtig ist die richtige ID
<html>
<title>FHEM</title>
<head></head>
<body>
<div class="page" id="content2">
...
https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/pagebutton
Hallo,
jetzt klappt es etwas besser.
<li data-row="13" data-col="1" data-sizex="4" data-sizey="10">
<div class="cell">
<div class="absolute bottom bottom-space-2x">
<div data-type="clock" data-format="H:i" class="large"></div>
<div data-type="clock" data-format="d.n.Y" class="small"></div>
</div>
<div data-type="pagebutton"
data-url="STK_Home.html"
data-load="#content1"
data-off-background-color="transparent"
data-off-color="#606060"
data-on-background-color="#606060"
data-on-color="#222222"
data-active-pattern="(.*/||.*index_page_left_demo.html||.*STK_Home.html)"
data-icon="fa-home"
class="default top-space">
</div>
<div data-type="pagebutton"
data-url="STK_Menue_Links.html"
data-load="#content2"
data-off-background-color="transparent"
data-off-color="#606060"
data-on-background-color="#606060"
data-on-color="#222222"
data-active-pattern=".*STK_Menue_Links.html"
data-icon="fa-music"
class="default top-space">
</div>
</div>
</li>
<li data-row="13" data-col="5" data-sizex="11" data-sizey="10">
<div class="page" id="content1"></div>
<div class="page" id="content2"></div>
</li>
Die STK_Home.html-Datei wird auch wie gewünscht geladen.
Die STK_Menue_Links.html-Datei wird aber in einem neuen Fenster ohne Formatierung geladen.
<html>
<title>FHEM</title>
<head></head>
<body>
<div class="page" id="content2">
<li data-row="1" data-col="1" data-sizex="9" data-sizey="2">
<header><div data-type="label" class="large">Verpasst</div></header>
<table style="width:100%">
<tr>
<td>
<div data-type="symbol"
data-device="Counter_Besucher"
data-get="state"
data-icon="fa-bell-o warn">
</div>
<br>
</td>
<td>
<div data-type="symbol"
data-device="Counter_Anrufer"
data-get="state"
data-icon="oa-phone_ring warn">
</div>
<br>
</td>
<td>
<div data-type="symbol"
data-device="MyFritzbox"
data-get="tam1_newMsg"
data-icon="oa-phone_answering warn">
</div>
<br>
</td>
</tr>
<tr>
<td>
<div data-type="label" style="margin-top:-24px;">Besucher</div>
</td>
<td>
<div data-type="label" style="margin-top:-24px;">Anrufe</div>
</td>
<td>
<div data-type="label" style="margin-top:-24px;">Nachrichten</div>
</td>
</tr>
</table>
</li>
</div>
</body>
</html>
Aufgebaut sind beide Dateien gleich (bis auf content1 und content2) ...
Was mache ich falsch?
Viele Grüße
Stephan
Fehler gefunden.
# vor den Dateinamen vergessen ... wofür die auch immer gut sind, aber damit funktioniert es :)
Hallo zusammen,
wie oben schon beschrieben, funktioniert das schon ganz gut ... wie ich jetzt festgestellt habe, aber nur unter Android auf meinem Tablet.
Ich habe die Seite mal mit dem InternetExplorer geladen. Da wird der Inhalt der index.html auch dargestellt. Der Inhalt, der über eine zweite html-Seite dazugelinkt wurde, wird aber nicht dargestellt.
Hat jemand noch eine Idee, woran das liegen kann?
Viele Grüße
Stephan
meckert der IE über etwas?
F12 -> Console
Ich würde sagen, nein ...