j-FormTab

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

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

Konfiguration:

width {Number} Breite des Formulars
widthlg {Number} Formularbreite für lg Geräte (Standard: config.width)
widthmd {Number} Breite des Formulars für md-Geräte (Standard: config.width)
widthsm {Number} Formularbreite für sm-Geräte (Standard: config.width)
widthxs {Number} Formularbreite für xs Geräte (Standard: config.width)
height {Number} Höhe der Form
heightlg {Number}-Formularhöhe für lg-Geräte (Standard: config.height)
heightmd {Number}-Formularhöhe für md-Geräte (Standard: config.height)
heightsm {Number}-Formularhöhe für sm-Geräte (Standard: config.height)
heightxs {Number}-Formularhöhe für xs-Geräte (Standard: config.height)
margin {Number} ein Standardrand zwischen Formularen (Standard: 10)
marginlg {Number} ein Standardspielraum für lg-Geräte (Standard: config.margin)
marginmd {Number} ein Standardspielraum für md-Geräte (Standard: config.margin)
marginsm {Number} ein Standardspielraum für sm-Geräte (Standard: config.margin)
marginxs {Number} ein Standardspielraum für xs-Geräte (Standard: config.margin)
marginfullscreen {Number} ein Standardrand für den Vollbildmodus (Standard: 20)
marginfullscreenlg {Number} ein Standard-Vollbildrand für lg-Geräte (Standard: config.marginfullscreen)
marginfullscreenmd {Number} ein Standard-Vollbildrand für md-Geräte (Standard: config.marginfullscreen)
marginfullscreensm {Number} ein Standard-Vollbildrand für sm-Geräte (Standard: config.marginfullscreen)
marginfullscreenxs {Number} ein standardmäßiger Vollbildrand für xs-Geräte (Standard: config.marginfullscreen)
submit {String}-Link zu einer globalen Funktion function(meta, data, hide), die ausgeführt wird, wenn die Schaltfläche „Senden“ gedrückt wird
cancel {String}-Link zu einer globalen Funktion, die ausgeführt wird, wenn die Schaltfläche cancel gedrückt wird
enter {Boolean} erfasst den enter-Schlüssel automatisch und klickt virtuell auf die Schaltfläche „Senden“ (Standard: false)
onclose {String} ein Link zur Funktion function(item, close) (optional)
onopen {String} ein Link zur Funktion function(item, el) (optional)
autofocus {Boolean} aktiviert den Autofokus für die erste Eingabe (Standard: false)
NEU right {Number} rechter Rand (Standard: 0)
NEU bottom {Number} unterer Rand (Standard: 0)
NEW useminheight {Boolean} verwendet min-height anstelle des CSS-Attributs height (Standard: false)

Gut zu wissen:

Jedes Element mit der Klasse cancel wird als Abbrechen-Schaltfläche verwendet

Datenquelle:

[
	{
		// Required
		id: 'YOUR_ID_OF_THE_FORM',
		name: 'YOUR_NAME_OF_THE_FORM',

		// Optional
		minimized: true,
		data: { blabla: '"data" will be cloned into the form scope' }
		// NEW: scope: false (disables scope)
		// NEW: scope: mycustomscopepath
	}
]

Verwenden Sie es mit <ui-component name="formtab">. 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="formtab" path="common.formtab">
	<script type="text/html">
		<div class="padding">
			YOUR CONTENT HERE.
		</div>
	</script>
</ui-component>

<script>
	var common = {};
	common.formtab = [];
	common.formtab.push({ id: '1', name: 'New message' });
	common.formtab.push({ id: '2', minimized: true, name: 'Message: John Deal' });
	common.formtab.push({ id: '3', minimized: true, name: 'Message: Denis Granec' });
</script>