Slideout im Footer

choetzu · 19 Januar 2017, 23:02:22

Hallo,

in der index_nav_footer.html ist der Slide-out-Button im Header. Gibt es die Möglichkeit, diesen in den Footer zu packen (zu den anderen links), damit man evtl. auf den Header verzichten kann?

Danke

Lg c

hier noch der Code der html-datei:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.3
     * 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_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <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="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <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>

    <!-- Demo FTUI 2.2 mobil page with slideout navigation and footer-->

    <nav id="menu">
        <div data-type="link" class="large top-space-2x left-space-3x"
           data-width="150"
           data-icon-left="fa-wrench"
           data-color="white"
           data-text-align="right"
           data-load="div#content6"
           data-url="#content_settings.html"
           data-active-color="green"
           data-active-pattern=".*#content_settings.html">Settings</div>
    </nav>

    <main id="panel" class="">
        <header id="header-nav" class="bg-lightgray row">
         <div data-type="slideout" class="col-1-8 big center-align notouch"></div>
         <div id="linkname" class="col-3-6 large bold center-align middle"></div>
         <div data-type="symbol" data-icon="fa-bell" data-device="dummy2" data-get-on="on.*" data-get-off="off" class="col-1-6 right-align big black"></div>
         <div data-type="symbol" data-device="dummy1" data-icon="ftui-window" class="col-1-8 big warn"></div>
        </header>

        <div class="page" id="content1"></div>
        <div class="page" id="content2"></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="#content1"
                         data-url="#content_temps.html"
                         data-icon="fa-dashboard"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_temps.html">
                    </div>
                    <span class="tab-label">Temps</span>
                 </div>
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content2"
                         data-url="#content_lights.html"
                         data-icon="fa-lightbulb-o"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_lights.html">
                    </div>
                    <span class="tab-label">Lights</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>

choetzu · 21 Januar 2017, 13:56:53

Hmm, jemand eine Ahnung? Ich krieg das nicht hin... danke.

setstate · 21 Januar 2017, 16:53:16

Code Auswählen


<footer>
    <div class="ontop">
        <div data-type="slideout" class="big notouch"></div>
    </div>
    <div class="tab-bar">
.
.
.

"ontop" liefert zufällig die nötigen Parameter zum Positionieren

ab v 2.5 reicht dann auch ein

Code Auswählen

<div data-type="slideout" class="big ontop notouch"></div>

choetzu · 22 Januar 2017, 12:45:17

herzlichen Dank... das hilft mir sehr. wo ich nun etwas anstehe, ist mit der integration des Slidout-Buttons in die Footer-Tablink-bar... irgendwie schaff ich es nicht, es so hinzukriegen, so dass es wie ein link-button aussieht. siehe anlage..

Code Auswählen

       <footer>
           
            
        <div class="tab-bar" >

           		 <div class="tab-link" >
           			<div data-type="slideout"          				 
           				 class="big top ontop notouch" >
           			</div>
					<span class="tab-label">Menu</span>
                 </div>
               
                 <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content1"
                         data-url="#tom_temp.html"
                         data-icon="ftui-thermo"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#tom_temp.html"
                         class="default">
                    </div>
                    <span class="tab-label">Temps</span>
                 </div>

danke vielmals für die hole

setstate · 22 Januar 2017, 13:23:36

wenn du das so haben willst, dann muss das .top und .ontop weg

choetzu · 22 Januar 2017, 14:21:11

super, danke.. das geht nun..

was bewirkt notouch und ontop? Ich habe jetzt beide entfernt..

choetzu · 28 Januar 2017, 19:40:55

hallo,
wie bringe ich nun das slideout ins selbe format wie die links? Ich habs im css von slidout und link nachgeschaut, aber da steh ich nun wirklich als Laie an.. ich habe mal die farbe rot hinterlegt um zu zeigen, dass slideout und link unterschiedliche formate haben.. siehe anlage.

hier noch der code..

danke für die Hilfe...

Code Auswählen

        <div class="tab-bar" >

           		<div class="tab-link left bg-green">
           			<div data-type="slideout"
           				data-icon="mi-line_weight"
           				data-icon-color="#555"
           				data-height="60%"        				 
           				class="big bg-red" >
           			</div>
				   <span class="tab-label top-align">Menu</span>
                 </div>
               
                 <div class="tab-link left-space" >
                    <div data-type="link"
                         data-load="#content1"
                         data-url="#tom_temp.html"
                         data-icon="ftui-thermo"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#tom_temp.html"
                         class="bg-red">
                    </div>
                    <span class="tab-label">Temps</span>
                 </div>