# j-Page

> Questo componente può gestire diversi contenuti in modo asincronico. il componente ha la stessa funzionalità di j-Part. Se l'elemento non contiene alcun contenuto, allora il componento scarica il contenuto accor

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

Questo componente può gestire diversi contenuti in modo asincronico. il componente ha la stessa funzionalità di `j-Part`. __Se l'elemento non contiene alcun contenuto__ allora il componento scarica il contenuto secondo il `url` definito nella configurazione.

- __NEW__ `path` può contenere `{String Array}`

__Configurazione__:

- `url {String}` richiesto, un indirizzo URL relativo
- `if {String}` richiesto, condizione, è paragonato al valore all'interno di `path` (__NEW__: supporta più percorsi divisi dal `comma`)
- `reload {String}` opzionale, un collegamento alla funzione `function(init) {}`, viene eseguito quando la pagina è visibile (sempre)
- `hidden {String}` opzionale, un collegamento alla funzione, viene eseguito quando la pagina è nascosta (sempre)
- `init {String}` opzionale, un collegamento alla funzione, viene eseguito quando la pagina è visibile e in tempo
- `default {String}` opzionale, un breve alias per `DEFAULT(default)`
- `hide {Boolean}` opzionale, elemento auto-scuro se la condizione `if` non è valida (default: `true`)
- `cleaner {Number}` opzionale, tempo idle (in minuti) per il funzionamento della pulizia (default: `0`)
- `clean {String}` opzionale, un collegamento alla funzione, viene eseguito prima che la pagina sia pulita
- `loading {Boolean}` opzionale, permette il carico tramite `SETTER('loading')` (default: `true`)
- `path {String}` opzionale, il componente sostituisce tutte le frasi `~PATH~` e `CLASS` per il valore del `path` nel modello scaricato
- `replace {String}` opzionale, un collegamento al metodo `function(content) { return content }` che può modificare il modello scaricato
- `absolute {Boolean}` opzionale, consente posizione assoluta (default `false`)
- `check {String}` opzionale, un collegamento alla funzione `function(next) { next(); }`, viene eseguito quando la pagina vuole visualizzare
- `invisible {Boolean}` consente di aggiungere la classe `invisible` quando la pagina va a nascondere (default: `false`)
- `delay {Number}` un ritardo (in ms) per la rimozione della classe `invisible` e il nascondimento di `loading` (default: `500`)
- `autofocus {Boolean/String}` focalizza la prima input, textarea (default: `false`)
- `delayloading {Number}` un ritardo (in ms) per nascondere `loading` (default: `800`)
- `id {String}` un identificatore personalizzato per sostituire le frasi `~ID~` nel HTML importato (default: vuoto)

__Buono sapere 1__:

- Le frasi `CLASS` e `~PATH~` saranno sostituite automaticamente da `config.path` o `config.if`.
- Le frasi `~ID~` saranno sostituite automaticamente da `config.id`

__Bene di sapere 2__:

Il componente di pagina emette un `event` nel modulo: `pages.` + `config.if` per l'estensione delle pagine.

__Buona conoscenza 3__:

Se il componente della pagina non è all'interno del campo, allora il valore del `config.if` sostituirà i caratteri `?` in tutte le chiavi di configurazione.

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

Utilizzare con `<ui-component name="page">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>
```