j-Window

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Die Komponente verschiebt den Inhalt dieser Komponente unter das Tag <body> (aufgrund der Positionierung)

Konfiguration:

title {String}-Fenstertitel
if {String} Bedingung für die Anzeige des Fensters, es wird mit dem Wert innerhalb von path verglichen
icon {String} Total.js-Symbole
reload {String}-Link zu einem globalen function(window_component) und er wird ausgeführt, wenn das Formular angezeigt wird
enter {Boolean} (optional) erfasst den enter-Schlüssel automatisch und führt die Übermittlung durch (Standard: false)
autofocus {Boolean/String} (optional) kann eine Eingabe fokussieren. String === jQuery selector für die Eingabe
default {String} (optional) ein kurzer Alias für DEFAULT(default, true)
closebutton {Boolean} (optional) kann die Schaltfläche x ausblenden (Standard: false)
zindex {Number} (optional) kann den Z-Index beeinflussen (Standard: 12)
scrollbar {Boolean} aktiviert eine benutzerdefinierte Bildlaufleiste (Standard: true)
scrollbarshadow {Boolean} optional, aktiviert einen Schatten in der Bildlaufleiste (Standard: false)
NEW closeesc {Boolean} schließt das Formular, wenn der Benutzer die Taste ESC drückt
Das Schließen von NEW independent {Boolean} hängt nicht von der Bedingung gemäß dem Pfad ab

Gut zu wissen:

Eine neue Version dieser Komponente unterstützt die dynamische Auswertung des Inhalts von <script type="text/html">. Das folgende Beispiel enthält ein Skript mit HTML und die Komponente wertet den Inhalt aus, ob der j-Window angezeigt wird (nur einmal).

<ui-component name="window" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>

Verwenden Sie es mit <ui-component name="window">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<ui-component name="window" path="common.window" config="if:user;title:Title of this window" class="hidden">
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
</ui-component>

<script>
	var common = {};
	common.window = 'user';
</script>