[Gelöst]Fragen zu pagebutton

HoTi · 14 Dezember 2016, 14:02:33

Hallo zusammen,

ich versuche mich gerade an Pagebutton. Leider bleiben meine Seiten leer. Es wird nur das Menü angezeigt.
Was mache ich da falsch? Leider musste ich auch gerade festellen das das Beispiel auch nicht funktioniert.

Ich habe das Beispiel genommen: https://forum.fhem.de/index.php/topic,56529.msg517205.html#msg517205

*edit*
Ich habe meine alte fhem-tablet-ui-custom.css übernommen. Das war ein Fehler! Neue gemacht und schon geht es. Leider bekomme ich das Hintergrundbild nihct mehr hin.
Hier mal mein Code:

index_neu.html

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <!--
    /* FHEM tablet ui */
    /*
    * UI builder framework for FHEM
    *
    * Version: 2.2.*
    * URL: https://github.com/knowthelist/fhem-tablet-ui
    *
    * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    *
    * - create a new folder named 'tablet' in /<fhem-path>/www
    * - copy all files incl. sub folders into /<fhem-path>/www/tablet
    * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
    * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
    */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="121">
    <meta name="widget_min_cols" content="13"> <!-- NEU nicht im alten -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="widget_margin" content="4">
    <meta name="longpoll" content="1">
    <meta name="debug" content="2">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- NEU nicht im neuen -->
	<meta name='toast' content="0"> <!-- toas messages -->
	<meta name="shortpoll-interval" content="900">
    <meta name="shortpoll-only-interval" content="30">
	<meta http-equiv="Cache-Control" content="no-store" />
	
    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-custom.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="lib/powerange.min.css" />
	<link rel="stylesheet" href="lib/openautomation.css" />
	<link rel="stylesheet" href="lib/fhemSVG.css" />
	<link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

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

    <title>Lauterbach</title>
</head>
<body>
    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="6" class="halbTransparent">
			<header><font size="+1">Uhr</font></header>
			<div data-type="clock" data-format="H:i:s"
				 class="cell big">
			</div>
			<div data-type="clock" data-format="d.m.y"
				 class="cell">
			</div>
    <header class="top-space"><font size="+1">MENU</font></header>

		<div class="cell">
            <div data-type="pagebutton" data-url="#page_main1.html" data-load="#main1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*index_neu.html||.*#page_main1.*.html)" data-icon="fa-home" class="top-space"></div>
            <div data-type="pagebutton" data-url="#page_main2.html" data-load="#main2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_main2.*.html" data-icon="oa-weather_summer" class="top-space"></div>
            <div data-type="pagebutton" data-url="#page_main3.html" data-load="#main3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_main3.*.html" data-icon="fa-camera" class="top-space"></div>
            <div data-type="pagebutton" data-url="#page_main4.html" data-load="#main4" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_main4.*.html" data-icon="fa-calendar-check-o" class="top-space"></div>
            <div data-type="pagebutton" data-url="#page_main5.html" data-load="#main5" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_main5.*.html" data-icon="fa-lock" class="top-space"></div>
            <div data-type="pagebutton" data-url="#page_main6.html" data-load="#main6" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_main6.*.html" data-icon="oa-fts_shutter_50" class="top-space"></div>
            <div data-type="pagebutton" data-url="#page_main7.html" data-load="#main7" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_main7.*.html" data-icon="fa-apple" class="top-space"></div>
            <div data-type="pagebutton" data-url="#page_main8.html" data-load="#main8" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_main8.*.html" data-icon="fa-linux" class="top-space"></div>
		</div>
        </li>
        <li data-row="1" data-col="2" data-sizex="11" data-sizey="6" class="halbTransparent">
            <div class="page" id="main1"></div>
            <div class="page" id="main2"></div>
            <div class="page" id="main3"></div>
			<div class="page" id="main4"></div>
            <div class="page" id="main5"></div>
            <div class="page" id="main6"></div>
			<div class="page" id="main7"></div>
            <div class="page" id="main8"></div>
         </li>
        </ul>
    </div>
</body>
</html>

page_main1.html

Code Auswählen


<html>
<title>FHEM</title>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * pagebutton sub page
     * -->
</head>
<body>
  <div class="page" id="main1">
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="7" data-sizey="1" class="halbTransparent">
                <div class="center full-height">
                    <div data-type="pagebutton" data-url="#page_main1_sub1.html" data-load="#main1_sub1" data-off-background-color="#444" data-off-color="#bbb" data-on-background-color="#11d597" data-on-color="#222222" data-active-pattern="(.*/||.*page_main1.html||.*#page_main1_sub1.html)" data-icon="mi-exposure_zero" class="default big"></div>
                    <div data-type="pagebutton" data-url="#page_main1_sub2.html" data-load="#main1_sub2" data-off-background-color="#444" data-off-color="#bbb" data-on-background-color="#11d597" data-on-color="#222222" data-active-pattern=".*#page_main1_sub2.html" data-icon="mi-exposure_plus_1" class="prefetch big"></div>
                    <div data-type="pagebutton" data-url="#page_main1_sub3.html" data-load="#main1_sub3" data-off-background-color="#444" data-off-color="#bbb" data-on-background-color="#11d597" data-on-color="#222222" data-active-pattern=".*#page_main1_sub3.html" data-icon="mi-exposure_plus_2" class="prefetch big"></div>
                </div>
            </li>
            <li data-row="2" data-col="1" data-sizex="7" data-sizey="8" style="margin:0px;" class="halbTransparent">
                <div class="page" id="main1_sub1"></div>
                <div class="page" id="main1_sub2"></div>
                <div class="page" id="main1_sub3"></div>
            </li>
        </ul>
    </div>
  </div>
</body>
</html>

FHEM Forum

[Gelöst]Fragen zu pagebutton

HoTi