j-FormTab

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Il componente sposta il contenuto di questo componente sotto la tag <body> (a causa della posizione)
Il componente si aspetta

Configurazione:

width {Number} larghezza di forma
Spessore di forma widthlg {Number} per i dispositivi lg (default: config.width)
Spessore di forma widthmd {Number} per i dispositivi md (default: config.width)
Spessore di forma widthsm {Number} per i dispositivi sm (default: config.width)
Spessore di forma widthxs {Number} per i dispositivi xs (default: config.width)
L'altezza di height {Number}
L'altezza della forma di heightlg {Number} per i dispositivi lg (default: config.height)
L'altezza della forma di heightmd {Number} per i dispositivi md (default: config.height)
L'altezza della forma di heightsm {Number} per i dispositivi sm (default: config.height)
L'altezza della forma di heightxs {Number} per i dispositivi xs (default: config.height)
margin {Number} è una margina predefinita tra i moduli (default: 10)
marginlg {Number} è un margine predefinito per i dispositivi lg (predefinita: config.margin)
marginmd {Number} è un margine predefinito per i dispositivi md (predefinita: config.margin)
marginsm {Number} è un margine predefinito per i dispositivi sm (predefinita: config.margin)
marginxs {Number} è un margine predefinito per i dispositivi xs (predefinita: config.margin)
marginfullscreen {Number} è una margina predefinita per la modalità Full Screen (predefinito: 20)
marginfullscreenlg {Number} è un margine di schermo completo predefinito per i dispositivi lg (predefinita: config.marginfullscreen)
marginfullscreenmd {Number} è un margine di schermo completo predefinito per i dispositivi md (predefinita: config.marginfullscreen)
marginfullscreensm {Number} è un margine di schermo completo predefinito per i dispositivi sm (predefinita: config.marginfullscreen)
marginfullscreenxs {Number} è un margine di schermo completo predefinito per i dispositivi xs (predefinita: config.marginfullscreen)
submit {String} collegato a una funzione globale function(meta, data, hide) e viene eseguito se il pulsante di presentazione è premuto
cancel {String} è collegato a una funzione globale e viene eseguito se il pulsante cancel viene premuto
enter {Boolean} cattura la chiave enter automaticamente e clicca virtualmente sul pulsante di presentazione (default: false)
onclose {String} un collegamento alla funzione function(item, close) (opzionale)
onopen {String} un collegamento alla funzione function(item, el) (opzionale)
autofocus {Boolean} consente il focus automatico per la prima input (default: false)
NEW right {Number} margine destra (defuato: 0)
NEW bottom {Number} margine inferiore (defuato: 0)
NEW useminheight {Boolean} utilizza min-height invece di height atributo CSS (default: false)

Buono sapere:

Ogni elemento con la classe cancel sarà utilizzato come pulsante di cancellazione

Fonte dati:

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

Utilizzare con <ui-component name="formtab">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>