# j-Page

> Deze component kan verschillende inhoud asynchronisch beheren. de component heeft dezelfde functionaliteit als j-Part. Als het element geen inhoud bevat, dan downloaden de componenten de inhoud accor

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

Deze component kan verschillende inhoud asynchronisch beheren.De component heeft dezelfde functionaliteit als `j-Part`. __Als het element geen inhoud bevat__ dan downloads de content volgens de `url` gedefinieerd in configuratie.

- __NEW__ `path` kan `{String Array}` bevatten

__Configuratie__:

- `url {String}` vereist, een relatieve URL
- `if {String}` vereist, voorwaarde, het is vergeleken met de waarde binnen de `path` (__NEW__: ondersteunt meerdere paden verdeeld door de `comma`)
- `reload {String}` optioneel, een link naar de functie `function(init) {}`, wordt uitgevoerd wanneer de pagina zichtbaar is (alleen)
- `hidden {String}` optioneel, een link naar de functie, het wordt uitgevoerd wanneer de pagina verborgen is (altijd)
- `init {String}` optioneel, een link naar de functie, het wordt uitgevoerd wanneer de pagina zichtbaar is en op tijd
- `default {String}` optioneel, een korte alias voor `DEFAULT(default)`
- `hide {Boolean}` optioneel, auto-verborgen element als de `if` niet geldig is (default: `true`)
- `cleaner {Number}` optioneel, idle tijd (in minuten) voor het uitvoeren van de reiniging (default: `0`)
- `clean {String}` optioneel, een link naar de functie, het wordt uitgevoerd voordat de pagina wordt gereinigd
- `loading {Boolean}` optioneel, mogelijk opladen via `SETTER('loading')` (default: `true`)
- `path {String}` optioneel, de component vervangt alle `~PATH~` en `CLASS` uitdrukkingen voor de waarde van de `path` in de gedownload template
- `replace {String}` optioneel, een link naar de methode `function(content) { return content }` die het gedownload template kan wijzigen
- `absolute {Boolean}` optioneel, mogelijkheid voor absolute positie (default `false`)
- `check {String}` optioneel, een link naar de functie `function(next) { next(); }`, wordt uitgevoerd wanneer de pagina wilt
- `invisible {Boolean}` maakt het mogelijk om de `invisible`-klasse toe te voegen wanneer de pagina gaat verbergen (default: `false`)
- `delay {Number}` een vertraging (in ms) voor het verwijderen van de `invisible` klasse en het verbergen van `loading` (default: `500`)
- `autofocus {Boolean/String}` richt zich op de eerste input, textarea (default: `false`)
- `delayloading {Number}` een vertraging (in ms) voor het verbergen van `loading` (default: `800`)
- `id {String}` is een aangepaste identificator voor het vervangen van `~ID~` zintuigen in de geïmporteerde HTML (default: leeg)

__Goed om te weten 1__:

- Alle `CLASS` en `~PATH~` De woorden worden vervangen door `config.path` Of `config.if` Automatisch
- Alle `~ID~`-afdrukken worden automatisch vervangen door `config.id`

__Goed om te weten 2__:

Pagina component geeft een `event` in het formulier: `pages.` + `config.if` voor de uitbreiding van pagina's. Dit kan zeer nuttig zijn voor sommige pluginsystemen.

__Goed om te weten 3__:

Als de pagina-component niet binnen het bereik ligt, dan vervangt de waarde van de `config.if` de `?` tekens in alle configuratieschijven.

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

Gebruik het met `<ui-component name="page">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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