Untermenü

[stefan-dd]

Hallo,
ich möchte in Tablet UI in der mobilen Ansicht ein Untermenü bauen um Heiztemperaturen einzustellen. Man soll auf ein Zahnrad drücken, das Untermenü öffnet sich, am besten nur ein Block der in die Seite eingeschoben wird.
Die Zeile mit den aktuellen Werten ist immer Sichtbar, drücke ich auf das Zahnradsymbol öffnet sich ein Block zum einstellen.
Wie macht man so etwas, nach was muss ich suchen?
Danke

[Amenophis86]

Schau mal bei den mobilen Beispielen: https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/mobil

[stefan-dd]

Danke,
das Menü habe ich bereits in Verwendung , ist aber für meine Vorstellungen nicht geeignet.
Ich habe "sectionen", eine Sektion ein Raum mit Temperatur, Luftfeuchtigkeit... in diesen Sektionen möchte ich ein Untermenü oder eine zusätzliche Zeile haben, die ich individuell aufrufen kann um die Temperatur für den entsprechenden Raum einzustellen.

"data-hide" funktioniert auch nicht, da nur einzelne Widgets unterstützt werden.

Was gibt es noch für Möglichkeiten?

[loki1978]

Hm evtl. verstehe ich nicht ganz was Du willst, aber ich würde mir an Deiner Stelle mal Popup anschauen.
Das Popup öffnet sich immer durch das erste Div. Also musst Du Dein Zahnrad ins erste Div packen.

[moonsorrox]

Ich habe "sectionen", eine Sektion ein Raum mit Temperatur, Luftfeuchtigkeit... in diesen Sektionen möchte ich ein Untermenü oder eine zusätzliche Zeile haben, die ich individuell aufrufen kann um die Temperatur für den entsprechenden Raum einzustellen.

du kannst in der section z.B. mit diesen Doppelpfeil/Dropdown nach unten eine weitere Zeile oder auch mehrere öffnen und dort eben einiges rein schreiben.

Mein Beispiel wenn ich verpasste Anrufe habe klappe ich das nach unten auf und dort gibt es beliebige Zeilen bei mir sind es 5 Zeilen.
Ist es das was du meinst, schau es dir mal an und passe das mal für deine Gegebenheiten an.

Hier mal der Code

Code Auswählen Erweitern

       <section id="sectionAnruf">
<table width="100%">
<tr>
<td width="50%" rowspan="2">
<div onclick="$('html, body').animate({scrollTop: $('#sectionAnruf').offset().top}, 500); if ($('#dropanruf').is(':hidden')) { $('#dropanruf').slideDown(500); $('#dropdownanruf > i.fa').addClass('fa-rotate-180'); } else { $('#dropanruf').slideUp(500); $('#dropdownanruf > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownanruf"
class="bigger left-align">Verpasste Anrufe
<i class="fa fa-angle-double-down large cell"></i>
</div>
</td>
<td width="25%">
<div data-type="symbol"
data-background-icon="none"
data-device="FritzBox"
data-get="tam1_newMsg"
data-states='["0","[1-9]{1}|[0-9]{2}"]'
data-icons='["ma-voicemail","ma-voicemail warn"]'
data-on-colors='["#888","#0088CC"]'
class="large">
</div>
</td>
<td width="25%">
<div class="large"
data-type="switch"
data-device="FritzBox"
data-get="tam1_state"
data-set="tam 1"
data-icon="ma-voicemail"
data-background-icon="fa-circle-thin"
data-off-background-color="#4169e1"
data-off-color="#C0C0C0"
data-on-background-color="#DC143C"
data-on-color="#DC143C">
</div>
</td>
</tr>
<tr>
<td class="large">neue<br />Nachrichten
</td>
<td class="large">An/Aus
</td>
</tr>
</table>
        </section>
<div id="dropanruf">
<section>
<table width="100%">
<tr>
<td>
<div data-type="symbol"
data-device="vAnrufliste"
data-get="1-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="narrow">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="1-timestamp"
data-part="1"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="1-timestamp"
data-part="2"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="1-number"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="1-name"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="1-duration"
class="">
</div>
</td>
</tr>
<tr>
<td>
<div data-type="symbol"
data-device="vAnrufliste"
data-get="2-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="narrow">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="2-timestamp"
data-part="1"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="2-timestamp"
data-part="2"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="2-number"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="2-name"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="2-duration"
class="">
</div>
</td>
</tr>
<tr>
<td>
<div data-type="symbol"
data-device="vAnrufliste"
data-get="3-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="narrow">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="3-timestamp"
data-part="1"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="3-timestamp"
data-part="2"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="3-number"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="3-name"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="3-duration"
class="">
</div>
</td>
</tr>
<tr>
<td>
<div data-type="symbol"
data-device="vAnrufliste"
data-get="4-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="narrow">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="4-timestamp"
data-part="1"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="4-timestamp"
data-part="2"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="4-number"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="4-name"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="4-duration"
class="">
</div>
</td>
</tr>
<tr>
<td>
<div data-type="symbol"
data-device="vAnrufliste"
data-get="5-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="narrow">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="5-timestamp"
data-part="1"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="5-timestamp"
data-part="2"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="5-number"
class="">
</div>
<div data-type="label"
data-device="vAnrufliste"
data-get="5-name"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="vAnrufliste"
data-get="5-duration"
class="">
</div>
</td>
</tr>
</table>
</section>