j-Window

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

Le composant déplace le contenu de ce composant sous le label <body> (en raison de la position)

Configuration :

title {String} Titre de fenêtre
La condition de if {String} pour l'affichage de la fenêtre, elle est comparée à la valeur au sein de path
icon {String} Total.js Les icônes
reload {String} est lié à un function(window_component) mondial et il est exécuté si le formulaire montre
enter {Boolean} (optionnel) capte automatiquement la clé enter et effectue la soumission (defaut: false)
autofocus {Boolean/String} (optionnel) peut focaliser une entrée. String === jQuery selector pour la entrée
default {String} (optionnel) un courte alias pour DEFAULT(default, true)
closebutton {Boolean} (optionnel) peut cacher le bouton x (defaut: false)
zindex {Number} (optionnel) peut affecter l'index z (defaut: 12)
scrollbar {Boolean} permet une barre d'écroulement personnalisée (defaut: true)
scrollbarshadow {Boolean} en option, active une ombre dans la barre de défilement (par défaut : false)
NEW closeesc {Boolean} ferme le formulaire lorsque l'utilisateur appelle la clé ESC
NEW independent {Boolean} fermeture ne dépend pas de la condition selon le chemin

Bon à savoir :

Une nouvelle version de ce composant soutient une é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-Window sera affiché (uniquement une fois).

<ui-component name="window" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>

Utilisez-le avec <ui-component name="window">. 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="window" path="common.window" config="if:user;title:Title of this window" class="hidden">
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
</ui-component>

<script>
	var common = {};
	common.window = 'user';
</script>