j-Page

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

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.

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.

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>