j-InlineForm

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

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

Konfiguration:

title {String} Formulartitel
width {Nummer} Form max-width
icon {String} Total-Ikon ohne ti- oder die ganze Erklärung z. B. ti ti-home
reload {String} eine Verbindung zu einer globalen Funktion und es wird ausgeführt, wenn das Formular zeigt
submit {String} eine Verbindung zu einer globalen Funktion und es wird ausgeführt, wenn der Submit-Button gedrückt wird
cancel {String} eine Verbindung zu einer globalen Funktion und es wird ausgeführt, wenn der Kündigungsknopf gedrückt wird
hide {String} eine Verbindung zu einer globalen Funktion und es wird ausgeführt, wenn die Form versteckt
enter {Boolean} erfährt den enter-Schlüssel automatisch und führt die Sendung durch (Default: false)
default {String} ein kurzer alias für DEFAULT(default, true)
autohide {Boolean} ermöglicht die automatische Verschlüsselung (Default: true)
autofocus {Boolean} führt Auto-Fokus auf den nächsten Eingang aus (Default: false)

Methoden:

instance.show(opt) - zeigt die Form
- opt.element {jQuery Element}
- opt.align {String} kann left (default), right oder center sein
- opt.offsetX {Nummer} offsetX (Default: 0)
- opt.offsetY {Nummer} offsetY (Default: 0)
- opt.position {String} kann top (default) oder bottom sein
- opt.callback {Funktion} eine Benutzerdefinierte Funktion callback(hide), hide Attribute ist function
instance.hide() - versteckt die Form

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

<div data---="inlineform">
	<script type="text/html">
		A CONTENT
	</script>
</div>

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

<a href="javascript:void(0)" class="exec">Show inline form</a>

<ui-component name="inlineform" config="width:250;title:Title;submit:userform_submit" class="hidden">
	<div style="padding:10px 15px">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();
	}

	$(document).on('click', '.exec', function() {
		var opt = {};
		opt.element = $(this);
		opt.align = 'left';
		SETTER('inlineform', 'show', opt);
	});
</script>