# j-Page

> Denna komponent kan hantera olika innehåll asynkroniskt. komponenten har samma funktionalitet som j-Part. Om elementet inte innehåller något innehåll laddar komponenten ned innehållet accor

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

Denna komponent kan hantera olika innehåll asynkroniskt. komponenten har samma funktionalitet som `j-Part`. __Om elementet inte innehåller något innehåll__ sedan komponenten laddar ner innehållet enligt `url` definierad i konfigurationen.

- __NEW__ `path` kan innehålla `{String Array}`

__Konfigurera__:

- `url {String}` krävs, en relativ URL
- `if {String}` krävs, villkoret är jämfört med värdet inom `path` (__NEW__: stöder flera vägar uppdelade av `comma`)
- `reload {String}` valfritt, en länk till funktion `function(init) {}`, det körs när sidan är synlig (alltid)
- `hidden {String}` valfritt, en länk till funktion, det körs när sidan är dold (alltid)
- `init {String}` är valfritt, en länk till funktion, det körs när sidan är synlig och på tid
- `default {String}` alternativ, en kort alias för `DEFAULT(default)`
- `hide {Boolean}` valfritt, självhäftande element om `if`-förhållandet inte är giltigt (default: `true`)
- `cleaner {Number}` valfritt, idle tid (i minuter) för att köra rengöring (default: `0`)
- `clean {String}` valfritt, en länk till funktion, det körs innan sidan rengörs
- `loading {Boolean}` valfritt, möjliggör laddning via `SETTER('loading')` (default: `true`)
- `path {String}` alternativ, komponenten ersätter alla `~PATH~` och `CLASS` fraser för värdet av `path` i nedladdningen
- `replace {String}` valfritt, en länk till metoden `function(content) { return content }` som kan ändra nedladdade mallar
- `absolute {Boolean}` alternativ, möjliggör absolut position (default `false`)
- `check {String}` valfritt, en länk till funktion `function(next) { next(); }`, det körs när sidan vill visa
- `invisible {Boolean}` möjliggör tillsättning av `invisible`-klassen när sidan kommer att gömma (default: `false`)
- `delay {Number}` en försening (i ms) för avlägsnande av `invisible` klass och döljande av `loading` (default: `500`)
- `autofocus {Boolean/String}` fokuserar den första inmatningen, textarea (default: `false`)
- `delayloading {Number}` en försening (i ms) för att dölja `loading` (default: `800`)
- `id {String}` en anpassad identifierare för att ersätta `~ID~` fraser i den importerade HTML (default: tom)

__Bra att veta 1__:

- Alla `CLASS` och `~PATH~` fraser ersätts automatiskt med `config.path` eller `config.if`.
- Alla `~ID~`-fraser ersätts automatiskt med `config.id`

__Bra att veta 2__:

Page component emitterar en `event` i formuläret: `pages.` + `config.if` för förlängning av sidor.

__Bra att veta 3__:

Om sidan komponenten inte är inom räckhåll ersätter värdet från `config.if` `?` tecken i alla konfigurationsnycklar.

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

Använd den med `<ui-component name="page">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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