Menü Page

DanHard · 10 Juli 2017, 17:58:39

Hallo Zusammen

Ich habe mir zum Testen eine neue Seite gemacht mit dem Beispiel von GITHUB:
https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_fixed_mobil.html

Wie kann ich machen das beim aufrufen der Seite index.html auch gleich die Seite mit der ID temp geladen wird?
Jetzt muss ich immer zuerst auf den Menüpunkt klicken damit ein Inhalt kommt.

Danke für eure Hilfe.
DanHard

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <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_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta name="gridster_cols" content="2">
	<meta name="gridster_rows" content="4">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="apple-touch-icon-precomposed" href="icon.png">

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="css/fhem-mobil-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="lib/material-icons.min.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>

    <title>FHEM-Tablet-UI-mobil</title>
</head>
<body>
       <main id="panel" class="">

        <div class="page" id="temp">
    <div class="gridster">        
<ul>
    <li data-row="1" data-col="1" data-sizey="1" data-sizex="2" class="gs-w vbox">
                <header class="big">AUSSEN</header>
                <div class="vbox">
                    <div class="hbox items-space-around bigger">
			<div class=""><i class="wi wi-thermometer" style="padding-left: 10px;"></i></div>
                        <div data-type="label" data-device="TFATS34C_1" data-get="temperature" data-unit="&deg;C"></div>
                    </div>
                    <div class="hbox items-space-around bigger">
			<div class=""><i class="wi wi-humidity"></i></div>
                        <div data-type="label" data-device="TFATS34C_1" data-get="humidity" data-unit="%"></div>
                </div>
            </li>
    <li data-row="2" data-col="1" data-sizey="1" data-sizex="2" class="gs-w vbox">
                <header class="big">WOHNZIMMER</header>
                <div class="vbox">
                    <div class="hbox items-space-around bigger">
			<div class=""><i class="wi wi-thermometer" style="padding-left: 10px;"></i></div>
                        <div data-type="label" data-device="TFATS34C_2" data-get="temperature" data-unit="&deg;C"></div>
                    </div>
                    <div class="hbox items-space-around bigger">
			<div class=""><i class="wi wi-humidity"></i>  </div>
                        <div data-type="label" data-device="TFATS34C_2" data-get="humidity" data-unit="%"></div>
                </div>
            </li>
    <li data-row="3" data-col="1" data-sizey="1" data-sizex="2" class="gs-w vbox">
                <header class="big">SCHLAFZIMMER</header>
                <div class="vbox">
                    <div class="hbox items-space-around bigger">
			<div class=""><i class="wi wi-thermometer" style="padding-left: 10px;"></i></div>
                        <div data-type="label" data-device="TFATS34C_3" data-get="temperature" data-unit="&deg;C"></div>
                    </div>
                    <div class="hbox items-space-around bigger">
			<div class=""><i class="wi wi-humidity"></i>  </div>
                        <div data-type="label" data-device="TFATS34C_3" data-get="humidity" data-unit="%"></div>
                </div>
            </li>

        </ul>

</div>
</div>
        <div class="page" id="licht">
    <div class="gridster"> 
<ul>   
<li data-row="1" data-col="1" data-sizey="1" data-sizex="2" class="gs-w vbox">
                <header class="big">BELEUCHTUNG</header>
                <div class="vbox">
		<div data-type="switch" data-icon="mi-lightbulb_outline" data-device='TRX_AC_0071d13202' data-get-on="on" data-get-off="off" data-set-on="on" data-set-off="off" class="green invert big"></div>
		<div data-type="label" class="big">PFLANZEN</div>
		<div data-type="switch" data-icon="mi-lightbulb_outline" data-device='TRX_AC_0071d13201' data-get-on="on" data-get-off="off" data-set-on="on" data-set-off="off" class="green invert big"></div>                   
		<div data-type="label" class="big">SOFA</div>
		</li>

        </ul>
</div></div>
        <div class="page" id="content3"></div>
        <div class="page" id="content4"></div>
        <div class="page" id="content5"></div>
        <div class="page" id="content6"></div>

        <footer>
            <div class="tab-bar" >
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#temp"
                         data-url="#temp.html"
                         data-icon="ftui-thermo"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#temp.html">
                    </div>
                    <span class="tab-label">Temp</span>
                 </div>
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#licht"
                         data-url="#licht.html"
                         data-icon="fa-lightbulb-o"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_lights.html">
                    </div>
                    <span class="tab-label">Licht</span>
                 </div>
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content3"
                         data-url="#content_windows.html"
                         data-icon="ftui-window"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_windows.html">
                    </div>
                    <span class="tab-label">Window</span>
                 </div>
                 <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content4"
                         data-url="#content_sounds.html"
                         data-icon="fa-music"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_sounds.html">
                    </div>
                    <span class="tab-label">Sound</span>
                 </div>
                 <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content5"
                         data-url="#content_range.html"
                         data-icon="ftui-thermo"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_range.html">
                    </div>
                    <span class="tab-label">Range</span>
                 </div>
                </div>
        </footer>
    </main>

</body>
</html>

setstate · 11 Juli 2017, 12:14:58

Man muss dem standardmäßig zuladenden Link Widget die class="default" mitgeben

FHEM Forum

Menü Page

DanHard

setstate