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:
<!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>
Hmm, jemand eine Ahnung? Ich krieg das nicht hin... danke.
<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
<div data-type="slideout" class="big ontop notouch"></div>
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..
<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
wenn du das so haben willst, dann muss das .top und .ontop weg
super, danke.. das geht nun..
was bewirkt notouch und ontop? Ich habe jetzt beide entfernt..
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...
<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>