j-InlineForm

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

Fonctionne avec Bootstrap
Le composant déplace le contenu de ce composant sous la balise <body> (à cause du positionnement)

Configuration :

Titre du formulaire title {String}
width {Numéro} largeur maximale du formulaire
icon {String} Icône totale sans ti- ou la déclaration complète, par ex. ti ti-home
reload {String} un lien vers une fonction globale et il est exécuté si le formulaire est affiché
submit {String} un lien vers une fonction globale et il est exécuté si le bouton de soumission est enfoncé
cancel {String} un lien vers une fonction globale et il est exécuté si le bouton d'annulation est enfoncé
hide {String} un lien vers une fonction globale et il est exécuté si le formulaire est caché
enter {Boolean} capture automatiquement la clé enter et effectue la soumission (par défaut : false)
default {String} un court alias pour DEFAULT(default, true)
autohide {Boolean} active le masquage automatique (par défaut : true)
autofocus {Boolean} effectue la mise au point automatique sur l'entrée la plus proche (par défaut : false)

Méthodes :

instance.show(opt) - affiche le formulaire
- Élément opt.element {élément jQuery}
- opt.align {String} peut être left (par défaut), right ou center
- opt.offsetX {Numéro} offsetX (par défaut : 0)
- opt.offsetY {Number} offsetY (par défaut : 0)
- opt.position {String} peut être top (par défaut) ou bottom
- opt.callback {Fonction} une fonction définie par l'utilisateur callback(hide), l'attribut hide est function
instance.hide() - masque le formulaire

Bon à savoir :

La nouvelle version de ce composant prend en charge l'évaluation dynamique du contenu de <script type="text/html">. L'exemple ci-dessous contient un script avec HTML et le composant évalue le contenu si le j-InlineForm sera affiché (une seule fois).

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

Utilisez-le avec <ui-component name="inlineform">. 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

<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>