j-FormTab

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

El componente mueve el contenido de este componente bajo la etiqueta <body> (debido al posicionamiento)
El componente espera una matriz.

Configuración:

width {Number} ancho de forma
widthlg {Number} ancho de formulario para dispositivos lg (predeterminado: config.width)
widthmd {Number} ancho de formulario para dispositivos md (predeterminado: config.width)
widthsm {Number} ancho de formulario para dispositivos sm (predeterminado: config.width)
widthxs {Number} ancho de formulario para dispositivos xs (predeterminado: config.width)
height {Number} altura de forma
heightlg {Number} altura de forma para dispositivos lg (predeterminado: config.height)
heightmd {Number} altura de forma para dispositivos md (predeterminado: config.height)
heightsm {Number} altura de forma para dispositivos sm (predeterminado: config.height)
heightxs {Number} altura de forma para dispositivos xs (predeterminado: config.height)
margin {Number} un margen predeterminado entre formularios (predeterminado: 10)
marginlg {Number} un margen predeterminado para dispositivos lg (predeterminado: config.margin)
marginmd {Number} un margen predeterminado para dispositivos md (predeterminado: config.margin)
marginsm {Number} un margen predeterminado para dispositivos sm (predeterminado: config.margin)
marginxs {Number} un margen predeterminado para dispositivos xs (predeterminado: config.margin)
marginfullscreen {Number} un margen predeterminado para el modo de pantalla completa (predeterminado: 20)
marginfullscreenlg {Number} un margen de pantalla completa predeterminado para dispositivos lg (predeterminado: config.marginfullscreen)
marginfullscreenmd {Number} un margen de pantalla completa predeterminado para dispositivos md (predeterminado: config.marginfullscreen)
marginfullscreensm {Number} un margen de pantalla completa predeterminado para dispositivos sm (predeterminado: config.marginfullscreen)
marginfullscreenxs {Number} un margen de pantalla completa predeterminado para dispositivos xs (predeterminado: config.marginfullscreen)
submit {String} enlace a una función global function(meta, data, hide) y se ejecuta si se presiona el botón enviar
cancel {String} enlaza a una función global y se ejecuta si se presiona el botón cancel
enter {Boolean} captura la clave enter automáticamente y prácticamente hace clic en el botón de enviar (predeterminado: false)
onclose {String} un enlace a la función function(item, close) (opcional)
onopen {String} un enlace a la función function(item, el) (opcional)
autofocus {Boolean} habilita el enfoque automático para la primera entrada (predeterminado: false)
NEW right {Number} margen derecho (predeterminado: 0)
NEW bottom {Number} margen inferior (predeterminado: 0)
NEW useminheight {Boolean} usa min-height en lugar del atributo CSS height (predeterminado: false)

Es bueno saberlo:

cada elemento con clase cancel se utilizará como botón de cancelación

Fuente de datos:

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

Úselo con <ui-component name="formtab">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes 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>