j-FullForm

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

Konfiguration:

title {String} Formulartitel
Bedingung if {String} für die Anzeige des Formulars, es wird mit dem Wert innerhalb von path verglichen
icon {String} Font-Awesome-Symbol ohne ti- oder new: ti ti-home
reload {String}-Link zu einem globalen function(fullform_component) und er wird ausgeführt, wenn das Formular angezeigt wird
submit {String}-Link zu einem globalen function(hide) und wird ausgeführt, wenn die Schaltfläche „Senden“ gedrückt wird
cancel {String}-Link zu einem globalen function(hide) und wird ausgeführt, wenn die Schaltfläche „Abbrechen“ gedrückt wird
enter {Boolean} erfasst den enter-Schlüssel automatisch und führt die Übermittlung durch (Standard: false)
center {Boolean} zentriert das Formular in der Mitte des Bildschirms
autofocus {Boolean/String} kann eine Eingabe fokussieren. String === jQuery selector für die Eingabe
default {String} ein Kurzalias für DEFAULT(default, true)
closebutton {Boolean} kann die Schaltfläche x ausblenden (Standard: false)
zindex {Number} kann den Z-Index beeinflussen (Standard: 12)
scrollbar {Boolean} aktiviert die benutzerdefinierte Bildlaufleiste (Standard: true)
scrolltop {Boolean} ermöglicht das Scrollen nach oben, nachdem das Formular angezeigt wird (Standard: true)
scrollbarshadow {Boolean} optional, aktiviert einen Schatten in der Bildlaufleiste (Standard: false)
style {Number} unterstützt zwei Stile (1: klassisch (Standard), 2: volle Größe ohne Polsterung)
closeoutside {Boolean} schließt das Formular, wenn der Benutzer außerhalb des Formulars klickt (Standard: false)
closeesc {Boolean} schließt das Formular, wenn der Benutzer die Taste ESC drückt
Das Schließen von independent {Boolean} hängt nicht von der Bedingung gemäß Pfad ab
close {String}-Link zu einem globalen function() und wird ausgeführt, wenn das Formular geschlossen wird
hide {String}-Link zu einem globalen function() und wird ausgeführt, wenn das Formular ausgeblendet wird

Gut zu wissen:

Die Komponente verschiebt den Inhalt dieser Komponente unter dem Tag <body> (aufgrund der Positionierung) und unterstützt die 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-Form angezeigt wird (nur einmal).

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

Verwenden Sie es mit <ui-component name="fullform">. 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="fullform" path="common.form" config="if:user;title:Title;submit:userform_submit" class="hidden">
	<div class="padding">
		SOME CONTENT
	</div>
	<nav>
		<button name="submit">SUBMIT</button>
		<button name="cancel">CANCEL</button>
	</nav>
</ui-component>

<script>

	function userform_submit(hide) {
		alert('SUBMIT');
		hide();
	}

	var common = {};

	// Show the form
	common.form = 'user';

</script>