j-FormTab

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant déplace le contenu de ce composant sous la balise <body> (à cause du positionnement)
Le composant attend un tableau

Configuration :

width {Number} largeur de forme
widthlg {Number} largeur de forme pour les appareils lg (par défaut : config.width)
widthmd {Number} largeur de forme pour les appareils md (par défaut : config.width)
widthsm {Number} largeur de forme pour les appareils sm (par défaut : config.width)
widthxs {Number} largeur de forme pour les appareils xs (par défaut : config.width)
height {Number} hauteur de forme
Hauteur de forme heightlg {Number} pour les appareils lg (par défaut : config.height)
Hauteur de forme heightmd {Number} pour les appareils md (par défaut : config.height)
Hauteur de forme heightsm {Number} pour les appareils sm (par défaut : config.height)
Hauteur de forme heightxs {Number} pour les appareils xs (par défaut : config.height)
margin {Number} une marge par défaut entre les formulaires (par défaut : 10)
marginlg {Number} une marge par défaut pour les appareils lg (par défaut : config.margin)
marginmd {Number} une marge par défaut pour les appareils md (par défaut : config.margin)
marginsm {Number} une marge par défaut pour les appareils sm (par défaut : config.margin)
marginxs {Number} une marge par défaut pour les appareils xs (par défaut : config.margin)
marginfullscreen {Number} une marge par défaut pour le mode plein écran (par défaut : 20)
marginfullscreenlg {Number} une marge plein écran par défaut pour les appareils lg (par défaut : config.marginfullscreen)
marginfullscreenmd {Number} une marge plein écran par défaut pour les appareils md (par défaut : config.marginfullscreen)
marginfullscreensm {Number} une marge plein écran par défaut pour les appareils sm (par défaut : config.marginfullscreen)
marginfullscreenxs {Number} une marge plein écran par défaut pour les appareils xs (par défaut : config.marginfullscreen)
submit {String} lien vers une fonction globale function(meta, data, hide) et elle est exécutée si le bouton soumettre est enfoncé
cancel {String} lien vers une fonction globale et il est exécuté si le bouton cancel est enfoncé
enter {Boolean} capture automatiquement la clé enter et clique virtuellement sur le bouton de soumission (par défaut : false)
onclose {String} un lien vers la fonction function(item, close) (optionnel)
onopen {String} un lien vers la fonction function(item, el) (optionnel)
autofocus {Boolean} active la mise au point automatique pour la première entrée (par défaut : false)
NOUVEAU right {Number} marge droite (par défaut : 0)
NOUVEAU Marge inférieure bottom {Number} (par défaut : 0)
NEW useminheight {Boolean} utilise min-height au lieu de l'attribut CSS height (par défaut : false)

Bon à savoir :

chaque élément de classe cancel sera utilisé comme bouton d'annulation

Source de données :

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

Utilisez-le avec <ui-component name="formtab">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>