j-FormTab

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Componenta mișcă conținutul acestui component sub eticheta <body> (datorită poziționării)
Componentul așteaptă array

Configurarea:

width {Number} de formă
widthlg {Number} de lățime a formularului pentru dispozitivele lg (default: config.width)
widthmd {Number} de lățime a formularului pentru dispozitivele md (default: config.width)
widthsm {Number} de lățime a formularului pentru dispozitivele sm (default: config.width)
widthxs {Number} de lățime a formularului pentru dispozitivele xs (default: config.width)
height {Number} înălțimea formei
Înălțimea de formă heightlg {Number} pentru dispozitivele lg (default: config.height)
Înălțimea de formă heightmd {Number} pentru dispozitivele md (default: config.height)
Înălțimea de formă heightsm {Number} pentru dispozitivele sm (default: config.height)
Înălțimea de formă heightxs {Number} pentru dispozitivele xs (default: config.height)
margin {Number} este o marjă standard între formularele (default: 10)
marginlg {Number} este o marjă standard pentru dispozitivele lg (default: config.margin)
marginmd {Number} este o marjă standard pentru dispozitivele md (default: config.margin)
marginsm {Number} este o marjă standard pentru dispozitivele sm (default: config.margin)
marginxs {Number} este o marjă standard pentru dispozitivele xs (default: config.margin)
marginfullscreen {Number} este o marjă standard pentru modul Full Screen (default: 20)
marginfullscreenlg {Number} este o marjă de ecran complet standard pentru dispozitivele lg (default: config.marginfullscreen)
marginfullscreenmd {Number} este o marjă de ecran complet standard pentru dispozitivele md (default: config.marginfullscreen)
marginfullscreensm {Number} este o marjă de ecran complet standard pentru dispozitivele sm (default: config.marginfullscreen)
marginfullscreenxs {Number} este o marjă de ecran complet standard pentru dispozitivele xs (default: config.marginfullscreen)
submit {String} se conectează la o funcție globală function(meta, data, hide) și este executată dacă este apăsat butonul de depunere
cancel {String} este conectat la o funcție globală și este executat dacă se prestează butonul cancel
enter {Boolean} captează automat cheia enter și face clic pe butonul de depunere (default: false)
onclose {String} un link la funcția function(item, close) (opțional)
onopen {String} un link la funcția function(item, el) (opțional)
autofocus {Boolean} permite auto-focul pentru prima intrare (default: false)
NEW right {Number} marjă dreaptă (defualt: 0)
NEW bottom {Number} marginea inferioară (defualt: 0)
NEW useminheight {Boolean} utilizează min-height în loc de height atribute CSS (default: false)

bine să știi:

Fiecare element cu clasa cancel va fi folosit ca buton de anulare

Sursă de date:

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

Utilizați-l cu <ui-component name="formtab">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>