Hallo,
ich möchte mir gerne ein fürs Tablet eine Ansicht mit Slideout bauen. Links oben soll es 3 kleine Balken vom Slideout geben, mit der das Menü geöffnet wird.
Folgende Probleme habe ich derzeit:
1) Nur der Bereich unter dem letzten Balken ist glückbar, das Icon nicht. nehme ich class="left" weg ist der Balken oben, das Icon ist aber klickbar. (slideout.jpg)
2) Das Menü vom Slideout soll (halb)transparent sein.
3) Ich möchte gerne Flexbox (vbox, hbox) verwenden. Dann wird bei mir jedoch nichts angezeigt. Mit section werden die Daten korrekt angezeigt. Darin geht bei mir auch kein Flexbox.
4) Gibt es Demoseiten mit Slideout index und Unterseiten?
Mein aktueller Code:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.2.0
* 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)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - 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 -->
<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.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" />
<!-- 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>
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-pc.css" />
<title>FHEM-Tablet-UI-mobil</title>
</head>
<body>
<!-- Demo FTUI 2.1 mobil page with slideout navigation -->
<nav id="menu">
<div data-type="link" class="default large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-dashboard"
data-color="white"
data-text-align="right"
data-load="#test1"
data-url="#t_test.html"
data-active-color="green"
data-active-pattern="(.*#t_test.html)">Temps</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-lightbulb-o"
data-color="white"
data-text-align="right"
data-load="#content2"
data-url="#content_lights.html"
data-active-color="green"
data-active-pattern=".*#content_lights.html">Lights</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="ftui-window"
data-color="white"
data-text-align="right"
data-load="#content3"
data-url="#content_windows.html"
data-active-color="green"
data-active-pattern=".*#content_windows.html">Windows</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-music"
data-color="white"
data-text-align="right"
data-load="#content4"
data-url="#content_sounds.html"
data-active-color="green"
data-active-pattern=".*#content_sounds.html">Sounds</div>
</nav>
<main id="panel" class="left">
<header id="header-nav" class="row">
<div data-type="slideout" class="big Transparent"></div>
</header>
</main>
<div class="page" id="test1"></div>
<div class="page" id="content2"></div>
<div class="page" id="content3"></div>
<div class="page" id="content4"></div>
</body>
</html>
Gruß
TWART016