FTUI Widget Popup - Versionsgeschichte

Pahenning am 3. August 2024 um 08:41 Uhr

2024-08-03T08:41:22Z

← Nächstältere Version		Version vom 3. August 2024, 10:41 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Popup Widget]] ist ein Widget für [[FHEM Tablet UI]], das eine Popup nach einem Klick auf ein anderes Widget öffnet.		Das [[{{PAGENAME}}\|Popup Widget]] ist ein Widget für [[FHEM Tablet UI V2]], das eine Popup nach einem Klick auf ein anderes Widget öffnet.

	<gallery>		<gallery>
Zeile 167:		Zeile 167:
	</div>		</div>
	</syntaxhighlight>		</syntaxhighlight>
	[[Kategorie:FHEM Tablet UI\|Popup]]		[[Kategorie:FHEM Tablet UI V2\|Popup]]

Baumbuwe: catsort

2018-01-26T13:58:05Z

catsort

← Nächstältere Version		Version vom 26. Januar 2018, 15:58 Uhr
Zeile 167:		Zeile 167:
	</div>		</div>
	</syntaxhighlight>		</syntaxhighlight>
	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI\|Popup]]

Standarduser: /* Attribute */ data-return-time hinzugefügt

2017-11-06T19:00:03Z

Attribute: data-return-time hinzugefügt

← Nächstältere Version		Version vom 6. November 2017, 21:00 Uhr
Zeile 34:		Zeile 34:
	\|-		\|-
	\|'''data-mode'''\|\|Animation des Popups (''animateTop'', ''animate'', ''fade'')\|\|animate\|\|data-mode="fade"		\|'''data-mode'''\|\|Animation des Popups (''animateTop'', ''animate'', ''fade'')\|\|animate\|\|data-mode="fade"
			\|-
			\|'''data-return-time'''\|\|Zeit in Sekunden, nach der sich das Popup von alleine schließt\|\|0\|\|data-return-time="10"
	\|}		\|}

Markusbloch: Anpassung von -Tags nach

2017-07-26T17:57:59Z

Anpassung von <source>-Tags nach <syntaxhighlight>

← Nächstältere Version		Version vom 26. Juli 2017, 19:57 Uhr
Zeile 46:		Zeile 46:
	* Es muss ein <nowiki><div class="dialog"></nowiki> innerhalb des Widgets gefunden werden. Siehe [[#Struktur]].		* Es muss ein <nowiki><div class="dialog"></nowiki> innerhalb des Widgets gefunden werden. Siehe [[#Struktur]].
	* Die CSS-Klasse '''interlock''' verhindert, dass Popup-Elemente manuell geschlossen werden. Das Schließen kann dann nur über ''data-get-off'' getriggert werden.		* Die CSS-Klasse '''interlock''' verhindert, dass Popup-Elemente manuell geschlossen werden. Das Schließen kann dann nur über ''data-get-off'' getriggert werden.
	* Ein Popup-Dialog kann auch durch einfaches Anklicken geschlossen werden. Hierfür kann folgender JavaScript-Code direkt im HTML verwendet werden: <~~source~~ lang="html"><div data-type="popup" ... onclick="$('.dialog-close').trigger('click');">...</~~source~~>		* Ein Popup-Dialog kann auch durch einfaches Anklicken geschlossen werden. Hierfür kann folgender JavaScript-Code direkt im HTML verwendet werden: <syntaxhighlight lang="html"><div data-type="popup" ... onclick="$('.dialog-close').trigger('click');">...</syntaxhighlight>
	===Verschachtelung===		===Verschachtelung===
	Soll in einem Popup-Dialog ein weiter Popup-Dialog geöffnet werden, kann es bei der Verwendung von <code>onclick</code> zum Schließen vorkommen, dass beide Dialoge geschlossen werden. Dies lässt sich verhindern, indem man jedem Popup eine andere ID mitgibt und diese gezielt anspricht.		Soll in einem Popup-Dialog ein weiter Popup-Dialog geöffnet werden, kann es bei der Verwendung von <code>onclick</code> zum Schließen vorkommen, dass beide Dialoge geschlossen werden. Dies lässt sich verhindern, indem man jedem Popup eine andere ID mitgibt und diese gezielt anspricht.
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="popup" id="popup1"		<div data-type="popup" id="popup1"
	...		...
Zeile 55:		Zeile 55:
	...>		...>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>

	==Struktur==		==Struktur==
	Innerhalb des Popup-Widgets muss ein Element mit der CSS-Klasse '''dialog''' vorhanden sein. Dieses Element wird als Popup geöffnet und in diesem können weitere Widgets vorhanden sein.		Innerhalb des Popup-Widgets muss ein Element mit der CSS-Klasse '''dialog''' vorhanden sein. Dieses Element wird als Popup geöffnet und in diesem können weitere Widgets vorhanden sein.
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="popup" data-height="150px" data-width="250px">		<div data-type="popup" data-height="150px" data-width="250px">
	<div><!-- Hier klicken, um das Popup zu öffnen --></div>		<div><!-- Hier klicken, um das Popup zu öffnen --></div>
Zeile 67:		Zeile 67:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>

	==Beispiele==		==Beispiele==
	===Popup nach Klick auf HTML-Element===		===Popup nach Klick auf HTML-Element===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="popup"		<div data-type="popup"
	data-height="50px"		data-height="50px"
Zeile 81:		Zeile 81:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Popup_01.png]]		[[File:FTUI_Widget_Popup_01.png]]


	===Popup öffnet abhängig von STATE===		===Popup öffnet abhängig von STATE===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="popup"		<div data-type="popup"
	data-device="dDummy"		data-device="dDummy"
Zeile 98:		Zeile 98:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	<gallery widths=300px heights=200px>		<gallery widths=300px heights=200px>
	File:FTUI_Widget_Popup_02.png		File:FTUI_Widget_Popup_02.png
Zeile 106:		Zeile 106:

	===Widgets innerhalb des Popups===		===Widgets innerhalb des Popups===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="popup"		<div data-type="popup"
	data-height="130px"		data-height="130px"
Zeile 116:		Zeile 116:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Popup_04.png]]		[[File:FTUI_Widget_Popup_04.png]]

Zeile 122:		Zeile 122:
	===Chart im Popup vergrößern===		===Chart im Popup vergrößern===
	In diesem Beispiel wird eine kleine Version des Charts dargestellt. Nach dem Klick auf das Chart öffnet sich ein Popup mit einer größeren Version.		In diesem Beispiel wird eine kleine Version des Charts dargestellt. Nach dem Klick auf das Chart öffnet sich ein Popup mit einer größeren Version.
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="popup"		<div data-type="popup"
	data-width="450px">		data-width="450px">
Zeile 143:		Zeile 143:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Popup_05.png]]		[[File:FTUI_Widget_Popup_05.png]]

Zeile 149:		Zeile 149:
	In diesem Beispiel wird das Popup geschlossen, sobald auf eines der Push-Widgets geklickt wird. Eventuelle Befehle der Widgets werden aber trotzdem ausgeführt.		In diesem Beispiel wird das Popup geschlossen, sobald auf eines der Push-Widgets geklickt wird. Eventuelle Befehle der Widgets werden aber trotzdem ausgeführt.

	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="popup" data-draggable="false" class="interlock">		<div data-type="popup" data-draggable="false" class="interlock">
	<div data-type="symbol"		<div data-type="symbol"
Zeile 164:		Zeile 164:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI]]

MichaelT: Letztes Beispiel: onClick nach onclick

2017-03-19T12:02:14Z

Letztes Beispiel: onClick nach onclick

← Nächstältere Version		Version vom 19. März 2017, 14:02 Uhr
Zeile 157:		Zeile 157:
	data-device="dDummy3"		data-device="dDummy3"
	data-icon="mi-local_dining"		data-icon="mi-local_dining"
	~~onClick~~="$('.dialog-close').trigger('click');"></div>		onclick="$('.dialog-close').trigger('click');"></div>
	<div data-type="push"		<div data-type="push"
	data-device="dDummy3"		data-device="dDummy3"
	data-icon="mi-tv"		data-icon="mi-tv"
	~~onClick~~="$('.dialog-close').trigger('click');"></div>		onclick="$('.dialog-close').trigger('click');"></div>
	</div>		</div>
	</div>		</div>
	</source>		</source>
	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI]]

Drhirn: Beispiel hinzugefügt

2017-03-07T15:28:59Z

Beispiel hinzugefügt

← Nächstältere Version		Version vom 7. März 2017, 17:28 Uhr
Zeile 146:		Zeile 146:
	[[File:FTUI_Widget_Popup_05.png]]		[[File:FTUI_Widget_Popup_05.png]]

			===Popup nach Klick auf Widget schließen===
			In diesem Beispiel wird das Popup geschlossen, sobald auf eines der Push-Widgets geklickt wird. Eventuelle Befehle der Widgets werden aber trotzdem ausgeführt.

			<source lang="html">
			<div data-type="popup" data-draggable="false" class="interlock">
			<div data-type="symbol"
			data-device="dDummy3"></div>
			<div class="dialog">
			<div data-type="push"
			data-device="dDummy3"
			data-icon="mi-local_dining"
			onClick="$('.dialog-close').trigger('click');"></div>
			<div data-type="push"
			data-device="dDummy3"
			data-icon="mi-tv"
			onClick="$('.dialog-close').trigger('click');"></div>
			</div>
			</div>
			</source>
	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI]]

Drhirn: /* Attribute */

2017-03-07T14:45:58Z

Attribute

← Nächstältere Version		Version vom 7. März 2017, 16:45 Uhr
Zeile 23:		Zeile 23:
	\|'''data-get-off'''\|\|Wert, bei dem das Popup geschlossen wird\|\|off\|\|data-get-on="false"		\|'''data-get-off'''\|\|Wert, bei dem das Popup geschlossen wird\|\|off\|\|data-get-on="false"
	\|-		\|-
	\|'''data-width'''\|\|Festgelegte Breite des Popups in px oder %\|\|\|\|data-width="200px"		\|'''data-width'''\|\|Festgelegte Breite des Popups in px oder %\|\|400px\|\|data-width="200px"
	\|-		\|-
	\|'''data-height'''\|\|Festgelegte Höhe des Popups in px oder %\|\|\|\|data-height="200px"		\|'''data-height'''\|\|Festgelegte Höhe des Popups in px oder %\|\|300px\|\|data-height="200px"
	\|-		\|-
	\|'''data-left'''\|\|Festgelegter Abstand des Popups vom linken Rand in px oder %\|\|Mitte des Bildschirms\|\|data-left="200px"		\|'''data-left'''\|\|Festgelegter Abstand des Popups vom linken Rand in px oder %\|\|Mitte des Bildschirms\|\|data-left="200px"

Drhirn am 27. Februar 2017 um 09:49 Uhr

2017-02-27T09:49:33Z

← Nächstältere Version		Version vom 27. Februar 2017, 11:49 Uhr
Zeile 35:		Zeile 35:
	\|'''data-mode'''\|\|Animation des Popups (''animateTop'', ''animate'', ''fade'')\|\|animate\|\|data-mode="fade"		\|'''data-mode'''\|\|Animation des Popups (''animateTop'', ''animate'', ''fade'')\|\|animate\|\|data-mode="fade"
	\|}		\|}

	~~Ein Popup-Dialog kann auch durch einfaches anklicken geschlossen werden. Hierfür kann folgender JS-Code direkt im HTML verwendet werden:~~
	~~<source lang="html">~~
	~~<div data-type="popup" ... onclick="$('.dialog-close').trigger('click');">...~~
	~~</source>~~

	==CSS Klassen==		==CSS Klassen==
Zeile 51:		Zeile 46:
	* Es muss ein <nowiki><div class="dialog"></nowiki> innerhalb des Widgets gefunden werden. Siehe [[#Struktur]].		* Es muss ein <nowiki><div class="dialog"></nowiki> innerhalb des Widgets gefunden werden. Siehe [[#Struktur]].
	* Die CSS-Klasse '''interlock''' verhindert, dass Popup-Elemente manuell geschlossen werden. Das Schließen kann dann nur über ''data-get-off'' getriggert werden.		* Die CSS-Klasse '''interlock''' verhindert, dass Popup-Elemente manuell geschlossen werden. Das Schließen kann dann nur über ''data-get-off'' getriggert werden.
			* Ein Popup-Dialog kann auch durch einfaches Anklicken geschlossen werden. Hierfür kann folgender JavaScript-Code direkt im HTML verwendet werden: <source lang="html"><div data-type="popup" ... onclick="$('.dialog-close').trigger('click');">...</source>
	===Verschachtelung===		===Verschachtelung===
	Soll in einem Popup-Dialog ein weiter Popup-Dialog geöffnet werden, kann es bei der Verwendung von <code>onclick</code> zum Schließen vorkommen, dass beide Dialoge geschlossen werden. Dies lässt sich verhindern, indem man jedem Popup eine andere ID mitgibt und diese gezielt anspricht.		Soll in einem Popup-Dialog ein weiter Popup-Dialog geöffnet werden, kann es bei der Verwendung von <code>onclick</code> zum Schließen vorkommen, dass beide Dialoge geschlossen werden. Dies lässt sich verhindern, indem man jedem Popup eine andere ID mitgibt und diese gezielt anspricht.

Standarduser: /* Attribute */ onclick hinzugefügt.

2017-02-25T12:07:13Z

Attribute: onclick hinzugefügt.

← Nächstältere Version		Version vom 25. Februar 2017, 14:07 Uhr
Zeile 35:		Zeile 35:
	\|'''data-mode'''\|\|Animation des Popups (''animateTop'', ''animate'', ''fade'')\|\|animate\|\|data-mode="fade"		\|'''data-mode'''\|\|Animation des Popups (''animateTop'', ''animate'', ''fade'')\|\|animate\|\|data-mode="fade"
	\|}		\|}

			Ein Popup-Dialog kann auch durch einfaches anklicken geschlossen werden. Hierfür kann folgender JS-Code direkt im HTML verwendet werden:
			<source lang="html">
			<div data-type="popup" ... onclick="$('.dialog-close').trigger('click');">...
			</source>

	==CSS Klassen==		==CSS Klassen==

Standarduser: /* Hinweise */ Verschachteln hinzugefügt.

2017-02-25T12:02:56Z

Hinweise: Verschachteln hinzugefügt.

← Nächstältere Version		Version vom 25. Februar 2017, 14:02 Uhr
Zeile 42:		Zeile 42:

	==Hinweise==		==Hinweise==
			===Allgemein===
	* ''data-mode'' kann die Werte '''animateTop''', '''animate''' oder '''fade''' haben.		* ''data-mode'' kann die Werte '''animateTop''', '''animate''' oder '''fade''' haben.
	* Es muss ein <nowiki><div class="dialog"></nowiki> innerhalb des Widgets gefunden werden. Siehe [[#Struktur]].		* Es muss ein <nowiki><div class="dialog"></nowiki> innerhalb des Widgets gefunden werden. Siehe [[#Struktur]].
	* Die CSS-Klasse '''interlock''' verhindert, dass Popup-Elemente manuell geschlossen werden. Das Schließen kann dann nur über ''data-get-off'' getriggert werden.		* Die CSS-Klasse '''interlock''' verhindert, dass Popup-Elemente manuell geschlossen werden. Das Schließen kann dann nur über ''data-get-off'' getriggert werden.

			===Verschachtelung===
			Soll in einem Popup-Dialog ein weiter Popup-Dialog geöffnet werden, kann es bei der Verwendung von <code>onclick</code> zum Schließen vorkommen, dass beide Dialoge geschlossen werden. Dies lässt sich verhindern, indem man jedem Popup eine andere ID mitgibt und diese gezielt anspricht.
			<source lang="html">
			<div data-type="popup" id="popup1"
			...
			onclick="$('#popup1.dialog-close').trigger('click');"
			...>
			</div>
			</source>

	==Struktur==		==Struktur==