j-FormTab

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Komponent presúva obsah tohto komponentu pod tag <body> (kvôli umiestneniu)
Komponent očakáva pole

Konfigurácia:

width {Number} šírka formy
widthlg {Number} šírka formulára pre zariadenia lg (predvolené: config.width)
widthmd {Number} šírka formulára pre zariadenia md (predvolené: config.width)
widthsm {Number} šírka formulára pre zariadenia sm (predvolené: config.width)
widthxs {Number} šírka formulára pre zariadenia xs (predvolené: config.width)
height {Number} výška formy
heightlg {Number} výška formulára pre zariadenia lg (predvolené: config.height)
heightmd {Number} výška formulára pre zariadenia md (predvolené: config.height)
heightsm {Number} výška formulára pre zariadenia sm (predvolené: config.height)
heightxs {Number} výška formulára pre zariadenia xs (predvolené: config.height)
margin {Number} predvolený okraj medzi formulármi (predvolené: 10)
marginlg {Number} predvolená marža pre zariadenia lg (predvolené: config.margin)
marginmd {Number} predvolená marža pre zariadenia md (predvolené: config.margin)
marginsm {Number} predvolená marža pre zariadenia sm (predvolené: config.margin)
marginxs {Number} predvolená marža pre zariadenia xs (predvolená hodnota: config.margin)
marginfullscreen {Number} predvolený okraj pre režim celej obrazovky (predvolené: 20)
marginfullscreenlg {Number} predvolený okraj na celú obrazovku pre zariadenia lg (predvolené: config.marginfullscreen)
marginfullscreenmd {Number} predvolený okraj na celú obrazovku pre zariadenia md (predvolené: config.marginfullscreen)
marginfullscreensm {Number} predvolená rezerva na celú obrazovku pre zariadenia sm (predvolené: config.marginfullscreen)
marginfullscreenxs {Number} predvolený okraj na celú obrazovku pre zariadenia xs (predvolené: config.marginfullscreen)
submit {String} prepojenie na globálnu funkciu function(meta, data, hide) a vykoná sa po stlačení tlačidla Odoslať
cancel {String} sa prepojí s globálnou funkciou a vykoná sa po stlačení tlačidla cancel
enter {Boolean} automaticky zachytí kľúč enter a virtuálne klikne na tlačidlo Odoslať (predvolené: false)
onclose {String} prepojenie na funkciu function(item, close) (voliteľné)
onopen {String} prepojenie na funkciu function(item, el) (voliteľné)
autofocus {Boolean} umožňuje automatické zaostrenie pre prvý vstup (predvolené: false)
NEW right {Number} pravý okraj (predvolené: 0)
NEW bottom {Number} spodný okraj (predvolené: 0)
NEW useminheight {Boolean} použite min-height namiesto height CSS atribút (predvolené: false)

Je dobré vedieť:

každý prvok s triedou cancel sa použije ako tlačidlo zrušenia

Zdroj údajov:

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

Použite ho so <ui-component name="formtab">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>