Ich habe nun den ganzen Tag an meinem Pagebutton-Sub-Menü gebastelt. Sieht auch schon recht gut aus.
Leider funktioniert es noch nicht 100%ig.
Und zwar werden über das automatische Öffnen des
Links Etagen (im Hauptmenü) --> der Link Räume (im 1. Untermenü) und --> der Link Raum Kino (im 2. Untermenü) und der Inhalt des Raumes Kino geöffnet.
Wenn ich nun in den Links hin und her springe und dann manuell auf den Link des Raumes Kino (im 2. Untermenü) klicke, dann öffnet sich der Inhalt nicht.
Ebenso: Wenn ich dann wieder auf den Link Etagen klicke, geht es auf einmal nicht mehr obwohl es vorher geklappt hat.
Mache ich einen Fehler?
Frage 2: Warum dauert der Aufbau so lange?
Hier habe ich das Verhalten einmal als Video aufgezeichnet:
https://vimeo.com/203641502 (https://vimeo.com/203641502)
So ist das Ganze aufgebaut (Dateien im Anhang):
Ich habe eine index.html die das linke Menü (Hauptmenü) darstellt:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="9">
<header><div data-type="label" class="medium orange">Menu</header>
<div class="cell">
<div data-type="pagebutton" data-url="#content_index.html" data-load="#content_index" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*index.html||.*#content_index.html)" data-icon="fa-home" class="default top-space"></div>
<div data-type="pagebutton" data-url="#1_light.html" data-load="#1_light" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#1_light.html" data-icon="fa-lightbulb-o" class="top-space"></div>
<div data-type="pagebutton" data-url="#content_music.html" data-load="#content9" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_music.html" data-icon="fa-music" class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#content_rollaeden.html" data-load="#content3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_rollaeden.html" data-icon="oa-fts_shutter_50" class="top-space"></div>
<div data-type="pagebutton" data-url="#content_phone.html" data-load="#content5" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_phone.html" data-icon="fa-phone" class="top-space"></div>
<div data-type="pagebutton" data-url="#1_etagen.html" data-load="#1_etagen" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_etagen.html||.*#2_etage_.*.html||.*#3_rooms_eg_.*.html)" data-icon="oa-control_building_s_all" class="top-space"></div>
<div data-type="pagebutton" data-url="#content_heating.html" data-load="#content7" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_heating.html" data-icon="oa-sani_heating" class="top-space"></div>
<div data-type="pagebutton" data-url="#content_charts.html" data-load="#content8" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_traffic.html" data-icon="fa-line-chart" class="top-space"></div>
<div data-type="pagebutton" data-url="#content_wetter.html" data-load="#content4" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_wetter.html" data-icon="oa-weather_cloudy" class="top-space"></div>
<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>
</li>
<li data-row="1" data-col="2" data-sizex="14" data-sizey="9">
<div class="page" id="1_etagen"></div>
<div class="page" id="content_index"></div>
<div class="page" id="1_light"></div>
<div class="page" id="content3"></div>
<div class="page" id="content4"></div>
<div class="page" id="content5"></div>
<div class="page" id="content7"></div>
<div class="page" id="content8"></div>
<div class="page" id="content9"></div>
</li>
Wenn ich dort auf das Haus klicke wird die Datei 1_etagen.html geöffnet (Code nachstehend) und öffnet automatisch den obersten Raum (Kino: 3_rooms_eg_kino.html - weiter unten) im 3. Menü (Datei 2_etage_xx.html - weiter unten)
<li data-row="1" data-col="1" data-sizex="1" data-sizey="9">
<header><div data-type="label" class="medium orange">Etagen</header>
<div class="cell">
<div data-type="pagebutton" data-url="#2_etage_dg.html" data-load="#etage_dg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*#2_etage_dg.html)" data-icon="oa-control_building_s_dg" class="default top-space"></div>
<div data-type="pagebutton" data-url="#2_etage_og.html" data-load="#etage_og" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_og.html||3_rooms_og_*.html)" data-icon="oa-control_building_s_og" class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#2_etage_eg.html" data-load="#etage_eg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_eg.html||.*#3_rooms_eg_.*.html)" data-icon="oa-control_building_s_eg" class="top-space"></div>
<div data-type="pagebutton" data-url="#2_etage_kg.html" data-load="#etage_kg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_kg.html||3_rooms_kg_*.html)" data-icon="oa-control_building_s_kg" class="top-space"></div>
<div data-type="pagebutton" data-url="#2_etage_au.html" data-load="#etage_au" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_au.html||3_rooms_au_kino.html||3_rooms_au_wintergarten.html||3_rooms_au_essen.html||3_rooms_au_wohnzimmer.html||3_rooms_au_flur.html||3_rooms_au_gaeste_wc.html||3_rooms_au_kueche.html||3_rooms_au_buero.html||3_rooms_au_bad.html)" data-icon="oa-control_building_outside" class="top-space"></div>
<div data-type="pagebutton" data-url="#2_etage_xx.html" data-load="#etage_xx" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_xx.html||.*#1_etagen.html||3_rooms_eg_.*.html)" data-icon="oa-control_building_s_all" class="top-space"></div>
</div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="13" data-sizey="9">
<div class="page" id="etage_xx"></div>
<div class="page" id="etage_eg"></div>
<div class="page" id="etage_dg"></div>
<div class="page" id="etage_og"></div>
<div class="page" id="etage_kg"></div>
<div class="page" id="etage_au"></div>
</li>
Die Datei 2_etage_xx.html stellt das 3. Menü dar, in dem die Räume der jeweiligen Etage auftauchen. xx zeigt die Favoritenräume an.
<li data-row="1" data-col="2" data-sizex="1" data-sizey="9">
<header><div data-type="label" class="medium orange">Räume XX</header>
<div class="cell">
<div data-type="pagebutton" data-url="#3_rooms_eg_kino.html" data-load="#rooms_eg_kino" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*1_etagen.html||.*#3_rooms_eg_kino.html||.*#2_etage_xx.html)" data-icon="oa-control_building_s_dg" class="default top-space"></div>
<div data-type="pagebutton" data-url="#3_rooms_eg_wintergarten.html" data-load="#rooms_eg_wintergarten" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#3_rooms_eg_wintergarten.html" data-icon="oa-control_building_s_og" class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#3_rooms_eg_essen.html" data-load="#rooms_eg_essen" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#3_rooms_eg_essen.html" data-icon="oa-control_building_s_eg" class="top-space"></div>
<div data-type="pagebutton" data-url="#3_rooms_eg_wohnzimmer.html" data-load="#rooms_eg_wohnzimmer" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#3_rooms_eg_wohnzimmer.html" data-icon="oa-control_building_s_kg" class="top-space"></div>
<div data-type="pagebutton" data-url="#3_rooms_eg_kueche.html" data-load="#rooms_eg_kueche" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#3_rooms_eg_kueche.html" data-icon="oa-control_building_outside" class="top-space"></div>
<div data-type="pagebutton" data-url="#3_rooms_eg_flur.html" data-load="#rooms_eg_flur" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#3_rooms_eg_flur.html" data-icon="oa-control_building_outside" class="top-space"></div>
<div data-type="pagebutton" data-url="#3_rooms_eg_gaeste_wc.html" data-load="#rooms_eg_gaeste_wc" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#3_rooms_eg_gaeste_wc.html" data-icon="oa-control_building_outside" class="top-space"></div>
<div data-type="pagebutton" data-url="#3_rooms_eg_bad.html" data-load="#rooms_eg_bad" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#3_rooms_eg_bad.html" data-icon="oa-control_building_outside" class="top-space"></div>
<div data-type="pagebutton" data-url="#3_rooms_eg_buero.html" data-load="#rooms_eg_buero" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#3_rooms_eg_buero.html" data-icon="oa-control_building_outside" class="top-space"></div>
</div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="12" data-sizey="9">
<div class="page" id="rooms_eg_kino"></div>
<div class="page" id="rooms_eg_wintergarten"></div>
<div class="page" id="rooms_eg_essen"></div>
<div class="page" id="rooms_eg_wohnzimmer"></div>
<div class="page" id="rooms_eg_kueche"></div>
<div class="page" id="rooms_eg_flur"></div>
<div class="page" id="rooms_eg_gaeste_wc"></div>
<div class="page" id="rooms_eg_bad"></div>
<div class="page" id="rooms_eg_buero"></div>
</li>
Der Content des Raumes wird in der Datei 3_rooms_eg_kino.html geöffnet:
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<div class="col-1-2">
<div data-type="dimmer" data-device="eg_ki_ledspots" data-set="pct" data-on-background-color="#aa6900" data-off-background-color="#555" data-background-icon="fa-square" class="small" alt="foo"></div>
<div data-type="label" class="darker">Deckenspots Wintergarten</div>
</div>
</li>
Ich versuche meine Frage mal zu vereinfachen:
In der Datei 2_etage_eg.html gibt es einen pagebutton der den Raum Kino (3_rooms_eg_kino.html) öffnen soll. Das tut er aber nicht.
Warum?
<div data-type="pagebutton" data-url="#3_rooms_eg_kino.html" data-load="#rooms_eg_kino" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*1_etagen.html||.*#2_etage_eg.html||.*#3_rooms_eg_kino.html)" data-icon="oa-control_building_s_dg" class="default top-space"></div>