[gelöst] Anfänger: pagetab-Navi - Wiki-Artikel nicht nachvollziehbar

curt · 30 September 2018, 06:32:20

Hallo allerseits,
ich habe Vorerfahrung html. Ich habe eine fertige FTUI-Seite, die auch ganz gut tut. Lediglich die Navigation (mehrere Seiten) tut absolut nicht. Ich habe schon verstanden, dass da innerhalb einer html-Seite mit Ankern rumgesprungen wird. Aber - tut nicht.

Dann habe ich testweise folgendes gemacht:
Ich habe für eine Testseite index1.html den kompletten Inhalt rausgekehrt und bin dann (fast) streng nach dem Wiki-Artikel https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton#Navigationsleiste (Unterabschnitt Navigationsleiste) vorgegangen, ich habe nur minimal angepasst.

Aber - tut auch nicht. Ich kann klicken wie ich will: Da sehe ich kein "Page 1" oder "Page 2". Ich selbst würde ja keck behaupten, dass der Wiki-Artikel fehlerhaft oder zumindest didaktisch falsch ist. Aber es wird wie immer sein: Ich habe mich doof angestellt. Problem ist - ich weiß nicht, was ich falsch machte.

Ich zeige mal die komplette Testseite index1.html:

Code Auswählen


<!DOCTYPE html>
<html>
<head>
        <title>FHEM-Tablet-UI</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--    <meta name="widget_base_width" content="80"> -->
<!--    <meta name="widget_base_height" content="65"> -->
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
        <meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
        <meta name="widget_margin" content="2">

        <meta name="gridster_disable" content="1">

        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <!-- define your personal style here, it wont be overwritten  -->
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

        <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

<meta name="gridster_cols" content="8">
<meta name="gridster_rows" content="5">
</head>
<body>

        <div class="gridster">
                <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5">

<div class="cell">
  <div data-type="pagetab"
       data-url="#page1.html"
       data-load="#page1"
       data-active-pattern=".*#page1.html"
       data-icon="fa-home"
       class="cell"></div>

  <div data-type="pagetab"
       data-url="#page2.html"
       data-load="#page2"
       data-active-pattern=".*#page2.html"
       data-icon="fa-sun-o"
       class="cell"></div>

</div>
</li>

<li data-row="1" data-col="2" data-sizex="7" data-sizey="5">
 <div class="page" id="page1">
  <div data-type="label">Page 1</div>
 </div>

 <div class="page" id="page2">
  <div data-type="label">Page 2</div>
 </div>


</li>

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

Was ist falsch?

Ulm32b · 30 September 2018, 09:53:50

Beachte bitte den Unterschied zwischen Pagetab und Pagebutton.

setstate · 30 September 2018, 10:00:50

Wollte ich auch gerade schreiben.
Der Artikel beschreibt Pagebutton (was ich auch anstatt Pagetab nutzen würde), du nutzt Pagetab.

Man braucht dann 3 Seiten:

index.html

Code Auswählen


<!DOCTYPE html>
<!-- index.html -->
<html>
<head>
        <title>FHEM-Tablet-UI</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="gridster_cols" content="8">
        <meta name="gridster_rows" content="5">
        <meta name="debug" content="0"> <!--0...5 -->
        <meta name="widget_margin" content="2">
        <meta name="gridster_disable" content="1">

        <script type="text/javascript" src="js/fhem-tablet-ui.js"></script>

</head>
<body>

    <div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="5">

        <div class="cell">
          <div data-type="pagebutton"
               data-url="#page1.html"
               data-load="#page1"
               data-active-pattern=".*#page1.html"
               data-icon="fa-home"
               class="cell"></div>

          <div data-type="pagebutton"
               data-url="#page2.html"
               data-load="#page2"
               data-active-pattern=".*#page2.html"
               data-icon="fa-sun-o"
               class="cell"></div>

        </div>
        </li>

        <li data-row="1" data-col="2" data-sizex="5" data-sizey="4">
            <div class="page" id="page1"></div>
            <div class="page" id="page2"></div>
        </li>

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

page1.html

Code Auswählen


<!-- page1.html -->
<div class="page" id="page1">
    <div class="hbox">Page 1</div>
</div>

page2.html

Code Auswählen


<!-- page2.html -->
<div class="page" id="page2">
    <div class="hbox">Page 2</div>
</div>

Das könnte man im Artikel noch besser angeben, wie die Seiten heißen und was deren Inhalt ist.

curt · 30 September 2018, 23:48:02

Zitat von: setstate am 30 September 2018, 10:00:50
Der Artikel beschreibt Pagebutton (was ich auch anstatt Pagetab nutzen würde), du nutzt Pagetab.

Waaaaaaa - grmpf. Mir war nicht bekannt, dass es zwei gibt. Und daher achtete ich genau darauf leider nicht. Siehe Subject: Anfänger halt.

Zitat von: setstate am 30 September 2018, 10:00:50
Das könnte man im Artikel noch besser angeben, wie die Seiten heißen und was deren Inhalt ist.

JA, natürlich. - Ich taste mich an neue Möglichkeiten schrittweise heran. Damit die Anzahl der Fehlermöglichkeiten nicht ins Unermessliche steigt. In diesem Fall ging es gar nicht, also habe ich es auf den Wiki-Artikel reduziert (versucht zu reduzieren, muss ich sagen - es ging ja schief). Und wenn ich eine Frage habe, kann ich ja auch schlecht mit einem undurchschaubaren Wust an Code um die Ecke kommen, dann würde mir wohl niemand helfen wollen. - Später kommen da sprechende Bezeichner hin.

Nun funktioniert es dank eurer Hilfe. Herzlich danke ich @Ulm32b für den Hinweis und @setstate für die ausführliche Erklärung.

FHEM Forum

[gelöst] Anfänger: pagetab-Navi - Wiki-Artikel nicht nachvollziehbar

curt

Ulm32b

setstate

curt