j-FormTab

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

De component beweegt de inhoud van deze component onder het <body>-tag (door positionering)
De component verwacht Array

Configuratie:

width {Number} breedte vorm
widthlg {Number} breedte van het formulier voor lg apparaten (default: config.width)
widthmd {Number} breedte van het formulier voor md apparaten (default: config.width)
widthsm {Number} breedte van het formulier voor sm apparaten (default: config.width)
widthxs {Number} breedte van het formulier voor xs apparaten (default: config.width)
height {Number} Hoogte van vorm
heightlg {Number} hoogte van de vorm voor lg apparaten (default: config.height)
heightmd {Number} hoogte van de vorm voor md apparaten (default: config.height)
heightsm {Number} hoogte van de vorm voor sm apparaten (default: config.height)
heightxs {Number} hoogte van de vorm voor xs apparaten (default: config.height)
margin {Number} een standaardmarge tussen formulieren (default: 10)
marginlg {Number} een standaardmarge voor lg apparaten (de standaard: config.margin)
marginmd {Number} een standaardmarge voor md apparaten (de standaard: config.margin)
marginsm {Number} een standaardmarge voor sm apparaten (de standaard: config.margin)
marginxs {Number} een standaardmarge voor xs apparaten (de standaard: config.margin)
marginfullscreen {Number} een standaardmarge voor volledige schermmodus (default: 20)
marginfullscreenlg {Number} een standaard fullscreen margin voor lg apparaten (de standaard: config.marginfullscreen)
marginfullscreenmd {Number} een standaard fullscreen margin voor md apparaten (de standaard: config.marginfullscreen)
marginfullscreensm {Number} een standaard fullscreen margin voor sm apparaten (de standaard: config.marginfullscreen)
marginfullscreenxs {Number} een standaard fullscreen margin voor xs apparaten (de standaard: config.marginfullscreen)
submit {String} verbinding met een wereldwijde functie function(meta, data, hide) en het wordt uitgevoerd als de submit-knop wordt gedrukt
cancel {String} verbinding met een wereldwijde functie en het wordt uitgevoerd als de cancel knop wordt gedrukt
enter {Boolean} slaat de enter sleutel automatisch op en klikt virtueel op de submit-knop (default: false)
onclose {String} een link naar functie function(item, close) (optional)
onopen {String} een link naar functie function(item, el) (optional)
autofocus {Boolean} zorgt voor een auto-focus voor de eerste input (default: false)
NEW right {Number} rechter margin (defualt: 0)
NEW bottom {Number} ondermarge (defualt: 0)
NEW useminheight {Boolean} gebruikt min-height in plaats van height CSS attribute (default: false)

Goed om te weten:

Elk element met de cancel-klasse wordt gebruikt als een annuleringsknop

Data-bron:

[
	{
		// 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
	}
]

Gebruik het met <ui-component name="formtab">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>