mehrstufiges Menü mit link/pagebutton

Begonnen von dt2510, 08 März 2018, 13:29:56

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

dt2510

08 März 2018, 13:29:56
Meine Hauptseite zeigt den Homestatus an und das Menü auf der linken Seite verlinkt über link-Widgets zu Unterseiten. Klicke ich zum Beispiel auf "Räume" wird eine neue html-Seite geladen (in dem Fall die Seite für das Erdgeschoß).
Das Menü auf der linken Seite bei den Räumen verlinkt ebenfalls über link-Widgets zu den anderen Etagen (analog dazu bei den Gruppen zu Schaltern, Sensoren, usw.). Das Menü unter dem Header lädt mit pagebutton-Widgets den betreffenden Raum in eine page darunter - muss also keine komplett neue html-Seite laden.

Soweit funktioniert das alles, allerdings gibt es ein Paar Probleme bzw. Dinge, die mich stören:

- sobald ich einen Raum auswähle fehlt die Markierung der Etage (data-active-pattern ? s. Bild 3)
- beim Laden einer Etage kann ich keinen Raum angeben, der standardmäßig in die page geladen werden soll
- das Neuladen der Seiten ist störend - eine html-Seite mit entsprechenden pages wäre mir sehr viel lieber

Gibt es keine elegantere Lösung für mehrstufige Menüstrukturen bzw. wie behebe ich die obigen Probleme

dt2510

#2
08 März 2018, 14:06:42
kann ich das irgendwo runterladen zum Testen ?

Esjay

#3
08 März 2018, 14:33:17
Du könntest den RAW Button nutzen, den Code kopieren, und als neue html Seite abspeichern.

Grüße

dt2510

#4
08 März 2018, 14:56:25
Danke :)

setstate

#5
08 März 2018, 15:10:51
Die passenden Main und Sub Unterseiten nicht vergessen.
Es gibt aber auch einen Download als ZIP Button auf der Projekte-Startseite. 

dt2510

#6
12 März 2018, 16:15:17
Ich habe die Seite jetzt mal umgebaut (siehe Bild 1)

Ich habe ein Hauptmenü links, ein Untermenü rechts und ein Unter-Untermenü oben

Hier die pagebutton Definitionen der 3 Ebenen
Code Auswählen
<div class="big"
     data-type="pagebutton"
     data-url="#pageCharts.html"
     data-load="#pageCharts"
     data-active-pattern="(.*#pageCharts.*.html)"
     data-icon="fa-area-chart"
     data-on-color="Linen"
     data-on-background-color="Transparent"
     data-off-color="DimGray"
     data-off-background-color="Transparent">
</div>

<div class="big default"
     data-type="pagebutton"
     data-url="#pageCharts1.html"
     data-load="#pageCharts1"
     data-active-pattern="(.*/||.*index.html||.*#pageCharts1.*.html)"
     data-parent="pageCharts"
     data-icon="fs-rc_1"
     data-on-color="Linen"
     data-on-background-color="Transparent"
     data-off-color="DimGray"
     data-off-background-color="Transparent">
</div>

<div class="normal top-space-2x default"
     style="font-family:Arial;color:Linen">Eingang
</div>
<div data-type="pagebutton"
     data-url="#pageCharts1entrance.html"
     data-load="#pageCharts1entrance"
     data-active-pattern="(.*pageCharts1entrance.html)"
     data-parent="pageCharts1"
     data-icon="fa-angle-down"
     data-on-color="Linen"
     data-on-background-color="Transparent"
     data-off-color="Linen"
     data-off-background-color="Transparent">
</div>

Unter- und Unter-Untermenü liegen auf der page "pageCharts", das Unter-Untermenü auf der page "pageCharts1". Durch die Angabe von "default" hätte ich erwartet, dass die Seite beim klicken auf das Diagrammsymbol genauso geladen wird, also Etage 1 als default und der Eingang als default. Stattdessen bleibt der Bereich in der Mitte leer und im Untermenü rechts ist nichts aktiv (Bild 2).
Wo liegt mein Fehler oder funktionieren geschachtelte "default" Angaben nicht ?

dt2510

#7
14 März 2018, 09:55:51
Zum besseren Verständnis hier die kompletten HTML-Dateien (ich hab' allerdings nur die betreffenden pagebutton Templates eingefügt)

index.html
Code Auswählen
<!DOCTYPE html>
  <html>
    <head>
      <title>TabletUI</title>
      <script src="js/fhem-tablet-ui.js" defer></script>
      <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta name="gridster_disable" content="1">
      <meta name="gridster_cols" content="10">
      <meta name="gridster_rows" content="7">   
      <meta name="widget_margin" content="5">
      <meta name="longpoll" content="1">
      <meta name="debug" content="0">
      <meta http-equiv="refresh" content="600; URL=index.html">
    </head>
    <body style="background-image:url(); background-size:cover; background-position:center;">
      <div data-template="includeWeatherBackground.inc"></div>
      <div class="gridster">
        <ul>
          <!-- DIALOGS -->
          <div data-template="popups/popupN5DL.inc"></div>
          <div data-template="popups/popupC1WZ.inc"></div>
          <!-- HEADER 10x1 -->
          <li data-row="1" data-col="1" data-sizex="10" data-sizey="1" style="background-color:transparent"><div data-template="includeHeader.inc"></div></li>
          <!-- MENU 1x6 -->
          <li data-row="2" data-col="1" data-sizex="1" data-sizey="6" style="background-color:rgba(0,0,0,0.7)">
            <div data-template="pagebuttons/pagebuttonDashboard.inc"></div>
            <div data-template="pagebuttons/pagebuttonRooms.inc"></div>
            <div data-template="pagebuttons/pagebuttonGroups.inc"></div>
<div class="big"
     data-type="pagebutton"
     data-url="#pageCharts.html"
     data-load="#pageCharts"
     data-active-pattern="(.*#pageCharts.*.html)"
     data-icon="fa-area-chart"
     data-on-color="Linen"
     data-on-background-color="Transparent"
     data-off-color="DimGray"
     data-off-background-color="Transparent">
</div>
            <div data-template="pagebuttons/pagebuttonWeather.inc"></div>
            <div data-template="pagebuttons/pagebuttonSystem.inc"></div>
          </li>
          <!-- CONTENT 9x6 -->
          <li data-row="2" data-col="2" data-sizex="9" data-sizey="6" style="background-color:transparent">
            <div class="page" id="pageDashboard"></div>
            <div class="page" id="pageRooms"></div>
            <div class="page" id="pageGroups"></div>
            <div class="page" id="pageCharts"></div>
            <div class="page" id="pageWeather"></div>
            <div class="page" id="pageSystem"></div>
          </li>
        </ul>
      </div>
    </body>
  </html>

pageCharts.html
Code Auswählen
<!DOCTYPE html>
  <html>
    <head>
      <title>TabletUI</title>
      <script src="js/fhem-tablet-ui.js" defer></script>
      <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta name="gridster_disable" content="1">
      <meta name="gridster_cols" content="9">
      <meta name="gridster_rows" content="6">   
      <meta name="widget_margin" content="0">
      <meta name="longpoll" content="1">
      <meta name="debug" content="0">
      <meta http-equiv="refresh" content="600; URL=index.html">
    </head>
    <body>
      <div class="page" id="pageCharts">
        <div class="gridster">
          <ul>
            <!-- CONTENT 8x6 -->
            <li data-row="1" data-col="1" data-sizex="8" data-sizey="6" style="background-color:transparent">
              <div class="page" id="pageCharts0"></div>
<div class="big default"
     data-type="pagebutton"
     data-url="#pageCharts1.html"
     data-load="#pageCharts1"
     data-active-pattern="(.*/||.*index.html||.*#pageCharts1.*.html)"
     data-parent="pageCharts"
     data-icon="fs-rc_1"
     data-on-color="Linen"
     data-on-background-color="Transparent"
     data-off-color="DimGray"
     data-off-background-color="Transparent">
</div>
              <div class="page" id="pageCharts2"></div>
            </li>
            <!-- MENU 1x6 -->
            <li data-row="1" data-col="9" data-sizex="1" data-sizey="6" style="background-color:rgba(0,0,0,0.7)">
              <div data-template="pagebuttons/pagebuttonCharts2.inc"></div>
              <div data-template="pagebuttons/pagebuttonCharts1.inc"></div>
              <div data-template="pagebuttons/pagebuttonCharts0.inc"></div>
            </li>
          </ul>
        </div>
      </div>   
    </body>
  </html>

pageCharts1.html
Code Auswählen
<!DOCTYPE html>
  <html>
    <head>
      <title>TabletUI</title>
      <script src="js/fhem-tablet-ui.js" defer></script>
      <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta name="gridster_disable" content="1">
      <meta name="gridster_cols" content="8">
      <meta name="gridster_rows" content="6">   
      <meta name="widget_margin" content="0">
      <meta name="longpoll" content="1">
      <meta name="debug" content="0">
      <meta http-equiv="refresh" content="600; URL=index.html">
    </head>
    <body>
      <div class="page" id="pageCharts1">
        <div class="gridster">
          <ul>
            <!-- CONTENT 8x6 -->
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" style="background-color:rgba(0,0,0,0.7)">
<div class="normal top-space-2x"
     style="font-family:Arial;color:Linen">Eingang
</div>
<div class="default"
     data-type="pagebutton"
     data-url="#pageCharts1entrance.html"
     data-load="#pageCharts1entrance"
     data-active-pattern="(.*pageCharts1entrance.html)"
     data-parent="pageCharts1"
     data-icon="fs-hue_room_frontdoor"
     data-on-color="Linen"
     data-on-background-color="Transparent"
     data-off-color="DimGray"
     data-off-background-color="Transparent">
</div>
            </li>
            <li data-row="1" data-col="2" data-sizex="1" data-sizey="1" style="background-color:rgba(0,0,0,0.7)"><div data-template="pagebuttons/pagebuttonCharts1staircase.inc"></div></li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="1" style="background-color:rgba(0,0,0,0.7)"><div data-template="pagebuttons/pagebuttonCharts1corridor.inc"></div></li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1" style="background-color:rgba(0,0,0,0.7)"><div data-template="pagebuttons/pagebuttonCharts1office.inc"></div></li>
            <li data-row="1" data-col="5" data-sizex="1" data-sizey="1" style="background-color:rgba(0,0,0,0.7)"><div data-template="pagebuttons/pagebuttonCharts1livingroom.inc"></div></li>
            <li data-row="1" data-col="6" data-sizex="1" data-sizey="1" style="background-color:rgba(0,0,0,0.7)"><div data-template="pagebuttons/pagebuttonCharts1diningroom.inc"></div></li>
            <li data-row="1" data-col="7" data-sizex="1" data-sizey="1" style="background-color:rgba(0,0,0,0.7)"><div data-template="pagebuttons/pagebuttonCharts1annex.inc"></div></li>
            <li data-row="1" data-col="8" data-sizex="1" data-sizey="1" style="background-color:rgba(0,0,0,0.7)"><div data-template="pagebuttons/pagebuttonCharts1kitchen.inc"></div></li>
            <li data-row="2" data-col="1" data-sizex="8" data-sizey="5" style="background-color:rgba(0,0,0,0.7)">
              <div class="page" id="pageCharts1entrance"></div>
              <div class="page" id="pageCharts1staircase"></div>
              <div class="page" id="pageCharts1corridor"></div>
              <div class="page" id="pageCharts1office"></div>
              <div class="page" id="pageCharts1kitchen"></div>
              <div class="page" id="pageCharts1diningroom"></div>
              <div class="page" id="pageCharts1livingroom"></div>
              <div class="page" id="pageCharts1annex"></div>
            </li>
          </ul>
        </div>
      </div>   
    </body>
  </html>

pageCharts1entrance.html
Code Auswählen
<!DOCTYPE html>
  <html>
    <head>
      <title>TabletUI</title>
    </head>
    <body>
      <div class="page" id="pageCharts1entrance">

        <header><div class="large thin bg-gray" style="font-family: Arial;color:Linen">Erdgeschoss - Eingang</div></header>

        <table class="top-space" style="border-spacing:0px;width:100%;height:90%">
          <tr><td class="top-space-3x" data-template="charts/chartAeotec_Multisensor_6_ID16.inc"></td></tr>
        </table>

      </div>
    </body>
  </html>

Wenn ich einmal eine Seite im Unter-Untermenü ausgewählt habe und nach dem Besuch einer anderen Seite zurückkomme (siehe Bild), wird diese zwar angezeigt, aber das data-active-pattern greift nicht mehr (in der Adresszeile sieht man ja auch, dass nur die Hauptseite und nicht die Detailseite über den pagebutton geladen wird). Ich hatte die Hoffnung, dass bei Angabe von data-parent die betreffende Unterseite weitergegeben würde ...
Drucken
Nach oben Seiten1
Benutzer-Aktionen