j-InlineForm

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

Funciona con Bootstrap
El componente mueve el contenido de este componente bajo la etiqueta <body> (debido al posicionamiento)

Configuración:

title {String} título del formulario
width {Número} forma ancho máximo
icon {String} Icono total sin ti- o la declaración completa, p. ti ti-home
reload {String} un enlace a una función global y se ejecuta si se muestra el formulario
submit {String} un enlace a una función global y se ejecuta si se presiona el botón enviar
cancel {String} un enlace a una función global y se ejecuta si se presiona el botón cancelar
hide {String} un enlace a una función global y se ejecuta si el formulario está oculto
enter {Booleano} captura la clave enter automáticamente y realiza el envío (predeterminado: false)
default {String} un alias corto para DEFAULT(default, true)
autohide {Booleano} habilita la ocultación automática (predeterminado: true)
autofocus {Booleano} realiza el enfoque automático a la entrada más cercana (predeterminado: false)

Métodos:

instance.show(opt) - muestra el formulario
- opt.element {elemento jQuery} elemento
- opt.align {Cadena} puede ser left (predeterminado), right o center
- opt.offsetX {Número} offsetX (predeterminado: 0)
- opt.offsetY {Número} desplazamientoY (predeterminado: 0)
- opt.position {Cadena} puede ser top (predeterminado) o bottom
- opt.callback {Función} una función definida por el usuario callback(hide), el atributo hide es function
instance.hide() - oculta el formulario

Es bueno saberlo:

La nueva versión de este componente admite la evaluación dinámica del contenido de <script type="text/html">. El siguiente ejemplo contiene un script con HTML y el componente evalúa el contenido si se mostrará j-InlineForm (solo una vez).

<div data---="inlineform">
	<script type="text/html">
		A CONTENT
	</script>
</div>

Úselo con <ui-component name="inlineform">. 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

<a href="javascript:void(0)" class="exec">Show inline form</a>

<ui-component name="inlineform" config="width:250;title:Title;submit:userform_submit" class="hidden">
	<div style="padding:10px 15px">SOME CONTENT</div>
	<nav>
		<button name="submit">SUBMIT</button>
		<button name="cancel">CANCEL</button>
	</nav>
</ui-component>

<script>

	function userform_submit(hide) {
		alert('SUBMIT');
		hide();
	}

	$(document).on('click', '.exec', function() {
		var opt = {};
		opt.element = $(this);
		opt.align = 'left';
		SETTER('inlineform', 'show', opt);
	});
</script>