j-Page

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

Ce composant peut gérer différents contenus de manière asynchronique.Le composant a la même fonctionnalité que j-Part. Si l'élément ne contient aucun contenu alors le composant télécharge le contenu selon le url défini dans la configuration.

NEW path peut contenir {String Array}

Configuration :

url {String} requise, une adresse URL relative
if {String} requis, condition, il est comparé à la valeur au sein de path (NEW: soutient plusieurs voies divisées par le comma)
reload {String} optionnel, un lien vers la fonction function(init) {}, il est exécuté lorsque la page est visible (toutefois)
hidden {String} optionnel, un lien vers la fonction, il est exécuté lorsque la page est cachée (toutefois)
init {String} optionnel, un lien vers la fonction, il est exécuté lorsque la page est visible et en temps
default {String} optionnel, un courte alias pour DEFAULT(default)
hide {Boolean} optionnel, élément d'écart automatique si la condition if n'est pas valide (défaut: true)
cleaner {Number} optionnel, temps idle (en minutes) pour le fonctionnement du nettoyage (defaut: 0)
clean {String} optionnel, un lien vers la fonction, il est exécuté avant que la page soit nettoyée
loading {Boolean} optionnel, permettant le chargement via SETTER('loading') (défaut: true)
path {String} optionnel, le composant remplacera toutes les phrases ~PATH~ et CLASS pour la valeur de la path dans le modèle téléchargé
replace {String} optionnel, un lien vers la méthode function(content) { return content } qui peut modifier le modèle téléchargé
absolute {Boolean} optionnel, permettant la position absolue (defaut false)
check {String} optionnel, un lien vers la fonction function(next) { next(); }, il est exécuté lorsque la page veut afficher
invisible {Boolean} permet l'ajout de la classe invisible lorsque la page va se cacher (défaut: false)
delay {Number} un retard (en ms) pour la suppression de la classe invisible et l'écart de la loading (défaut: 500)
autofocus {Boolean/String} se concentre sur la première entrée, textarea (defaut: false)
delayloading {Number} un retard (en ms) pour cacher de loading (défaut: 800)
id {String} un identifiant personnalisé pour remplacer les phrases ~ID~ dans le HTML importé (par défaut : vide)

Bon à savoir 1 :

toutes les phrases CLASS et ~PATH~ seront remplacées automatiquement par config.path ou config.if
toutes les phrases ~ID~ seront automatiquement remplacées par config.id

Bon à savoir 2 :

Le composant de page émet un event dans le formulaire: pages. + config.if pour l'extension des pages.

Bonne connaissance 3:

Si le composant de page n'est pas dans la portée, alors la valeur du config.if remplacera les caractères ? dans toutes les clés de configuration.

ON('pages.YOURIFCONDITION', function(element, pagecomponent) {
	// It's executed only when the page is initialized
});

Utilisez-le avec <ui-component name="page">. 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="page" path="currentpage" config="if:home;url:/bla/bla/home.html"></ui-component>
<ui-component name="page" path="currentpage" config="if:services;url:/bla/bla/services.html;reload:services_reload"></ui-component>
<ui-component name="page" path="currentpage" config="if:contact;url:/bla/bla/contact.html;reload:contact_reload"></ui-component>

<pre><code>SET(&#39;currentpage&#39;, &#39;home&#39;);</code></pre>

<script>
	var currentpage = '';
</script>