ForgeComposants
fr

Composants

j-Part

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

Ce composant peut traiter différents contenus de manière synchronique. 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 partie est visible (toutefois)
  • hidden {String} optionnel, un lien vers la fonction, il est exécuté lorsque la partie est cachée (toutefois)
  • init {String} optionnel, un lien vers la fonction, il est exécuté lorsque la partie 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 partie 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 partie veut afficher
  • invisible {Boolean} permet l'ajout de la classe invisible lorsque la partie 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 :

Les composants émettent un event sous la forme : parts. + config.if pour l'extension des pièces.

Bonne connaissance 3:

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

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

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

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

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