j-FormTab

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Komponenten flyttar innehållet i denna komponent under <body>-taggen (på grund av positionering)
Komponenten förväntar sig att

Konfigurera:

width {Number} bredd av form
widthlg {Number} formbredd för lg enheter (default: config.width)
widthmd {Number} formbredd för md enheter (default: config.width)
widthsm {Number} formbredd för sm enheter (default: config.width)
widthxs {Number} formbredd för xs enheter (default: config.width)
height {Number} höjd av form
heightlg {Number} formhöjd för lg enheter (default: config.height)
heightmd {Number} formhöjd för md enheter (default: config.height)
heightsm {Number} formhöjd för sm enheter (default: config.height)
heightxs {Number} formhöjd för xs enheter (default: config.height)
margin {Number} en standardmarginal mellan formulär (default: 10)
marginlg {Number} en standardmarginal för lg-enheter (default: config.margin)
marginmd {Number} en standardmarginal för md-enheter (default: config.margin)
marginsm {Number} en standardmarginal för sm-enheter (default: config.margin)
marginxs {Number} en standardmarginal för xs-enheter (default: config.margin)
marginfullscreen {Number} en standardmarginal för fullskärmläge (default: 20)
marginfullscreenlg {Number} en standard fullskärmmarginal för lg-enheter (default: config.marginfullscreen)
marginfullscreenmd {Number} en standard fullskärmmarginal för md-enheter (default: config.marginfullscreen)
marginfullscreensm {Number} en standard fullskärmmarginal för sm-enheter (default: config.marginfullscreen)
marginfullscreenxs {Number} en standard fullskärmmarginal för xs-enheter (default: config.marginfullscreen)
submit {String} länkar till en global funktion function(meta, data, hide) och det körs om du trycker på knappen för inlämning
cancel {String} länkar till en global funktion och den körs om knappen cancel trycks
enter {Boolean} fångar enter-nyckeln automatiskt och klickar virtuellt på inlämningsknappen (default: false)
onclose {String} en länk till funktionen function(item, close) (alternativ)
onopen {String} en länk till funktionen function(item, el) (alternativ)
autofocus {Boolean} möjliggör självfokus för den första inmatningen (default: false)
NEW right {Number} höger marginal (defualt: 0)
NEW bottom {Number} nedre marginal (defualt: 0)
NEW useminheight {Boolean} använder min-height istället för height CSS attribut (default: false)

Bra att veta:

Varje element med cancel-klassen används som en annulleringsknapp

Data-källa:

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

Använd den med <ui-component name="formtab">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>