# j-Page

> Diese Komponente kann verschiedene Inhalte asynchron verarbeiten. Die Komponente hat die gleiche Funktionalität wie j-Part. Wenn das Element keinen Inhalt enthält, lädt die Komponente den Inhalt entsprechend herunter

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

Diese Komponente kann verschiedene Inhalte asynchron verarbeiten. Die Komponente hat die gleiche Funktionalität wie `j-Part`. __Wenn das Element keinen Inhalt enthält__, lädt die Komponente den Inhalt gemäß dem in der Konfiguration definierten `url` herunter.

- __NEW__ `path` kann `{String Array}` enthalten

__Konfiguration__:

- `url {String}` erforderlich, eine relative URL-Adresse
- `if {String}` erforderlich, Bedingung, es wird mit dem Wert innerhalb von `path` verglichen (__NEU__: unterstützt mehrere Pfade geteilt durch `comma`)
- `reload {String}` optional, ein Link zur Funktion `function(init) {}`, sie wird ausgeführt, wenn die Seite sichtbar ist (immer)
- `hidden {String}` optional, ein Link zur Funktion, sie wird ausgeführt, wenn die Seite ausgeblendet ist (immer)
- `init {String}` optional, ein Link zur Funktion, sie wird einmalig ausgeführt, wenn die Seite sichtbar ist
- `default {String}` optional, ein kurzer Alias für `DEFAULT(default)`
- `hide {Boolean}` optional, Element automatisch ausblenden, wenn die `if`-Bedingung nicht gültig ist (Standard: `true`)
- `cleaner {Number}` optional, Leerlaufzeit (in Minuten) für die Ausführung der Reinigung (Standard: `0`)
- `clean {String}` optional, ein Link zur Funktion, sie wird ausgeführt, bevor die Seite bereinigt wird
- `loading {Boolean}` optional, ermöglicht das Laden über `SETTER('loading')` (Standard: `true`)
- `path {String}` optional, die Komponente ersetzt alle `~PATH~`- und `CLASS`-Sätze für den Wert von `path` in der heruntergeladenen Vorlage
- `replace {String}` optional, ein Link zur Methode `function(content) { return content }`, mit der die heruntergeladene Vorlage geändert werden kann
- `absolute {Boolean}` optional, ermöglicht absolute Position (Standard `false`)
- `check {String}` optional, ein Link zur Funktion `function(next) { next(); }`, sie wird ausgeführt, wenn die Seite angezeigt werden soll
- `invisible {Boolean}` ermöglicht das Hinzufügen der Klasse `invisible`, wenn die Seite ausgeblendet wird (Standard: `false`)
- `delay {Number}` eine Verzögerung (in ms) für das Entfernen der Klasse `invisible` und das Ausblenden von `loading` (Standard: `500`)
- `autofocus {Boolean/String}` fokussiert die erste Eingabe, Textbereich (Standard: `false`)
- `delayloading {Number}` eine Verzögerung (in ms) für das Ausblenden von `loading` (Standard: `800`)
- `id {String}` eine benutzerdefinierte Kennung zum Ersetzen von `~ID~`-Phrasen im importierten HTML (Standard: leer)

__Gut zu wissen 1__:

- Alle `CLASS`- und `~PATH~`-Sätze werden automatisch durch `config.path` oder `config.if` ersetzt
- Alle `~ID~`-Sätze werden automatisch durch `config.id` ersetzt

__Gut zu wissen 2__:

Die Seitenkomponente gibt ein `event` in der Form `pages.` + `config.if` zum Erweitern von Seiten aus. Dies kann für einige Plugin-Systeme sehr nützlich sein. Beispiel:

__Gut zu wissen 3__:

Wenn die Seitenkomponente nicht im Gültigkeitsbereich liegt, ersetzt der Wert aus `config.if` die `?`-Zeichen in allen Konfigurationsschlüsseln.

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

Verwenden Sie es mit `<ui-component name="page">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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