# j-Page

> Ce composant peut traiter différents contenus de manière asynchronique.Le composant a la même fonctionnalité que le j-Part.Si l'élément ne contient pas de contenu, alors le composant télécharge le contenu accor

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 315b74eab54f4c34b16bf0b2b1a5ae799301c54abbdf1c0e2ac5241cb90f77fe
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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.

```js
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.

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