j-Centered

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:

Bedingung if {String} für die Anzeige des Formulars, es wird mit dem Wert innerhalb von data-jc-path verglichen
reload {String}-Link zu einem globalen function(form_component) und wird ausgeführt, wenn das Formular angezeigt wird
autofocus {Boolean/String} kann eine Eingabe fokussieren. String === jQuery selector für die Eingabe
default {String} ein Kurzalias für DEFAULT(default, true)
zindex {Number} kann den Z-Index beeinflussen (Standard: 12)
closebutton {Boolean} kann die Schaltfläche x ausblenden (Standard: false)
closeoutside {Boolean} schließt das Formular, wenn der Benutzer außerhalb des Formulars klickt (Standard: false)
oder closeoutside {String} kann einen jQuery-Selektor enthalten, der in ein Schließereignis einbezogen wird
closeesc {Boolean} schließt das Formular, wenn der Benutzer ESC drückt
scrollbar {Boolean} aktiviert die benutzerdefinierte Bildlaufleiste (Standard: true)
visibleY {Boolean} zeigt vertikale Bildlaufleiste (Standard: false)
close {String}-Link zu einem globalen function(), der ausgeführt wird, wenn das Formular geschlossen wird

Gut zu wissen:

Die 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 j-Form angezeigt wird (nur einmal).

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

Alle Schaltflächen mit dem Attribut name="close" schließen die Komponente automatisch
Alle Elemente mit dem Attribut data-name="close" schließen die Komponente automatisch

Verwenden Sie es mit <ui-component name="centered">. 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

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, nam distinctio numquam dolore neque impedit, voluptate quam fugiat culpa minus.</div>
<br />
<a href="javascript:show()">Show</a>

<ui-component name="centered" path="form" config="if:login" class="hidden">
	<figure style="width:300px;margin:0 auto;background-color:rgba(100,100,100,0.1);display:block;padding:20px">
		<div><img src="https://www.totaljs.com/img/logo.svg" border="0" alt="Componentator" class="img-responsive" /></div>
		<br />
		<div class="m">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nulla ratione possimus ducimus iusto porro, non laboriosam sunt reiciendis at.</div>
		<div class="center">
			<button name="close">CLOSE</button>
		</div>
	</figure>
</ui-component>

<script>
	var form = '';
	function show() {
		SET('form', 'login');
	}
</script>