j-Part

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

Questo componente può gestire diversi contenuti in modo asincronico. Se l'elemento non contiene alcun contenuto quindi il componente 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 parte è visibile (sempre)
hidden {String} opzionale, un collegamento alla funzione, viene eseguito quando la parte è nascosta (sempre)
init {String} opzionale, un collegamento alla funzione, viene eseguito quando la parte è 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 parte 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 parte vuole mostrare
invisible {Boolean} consente di aggiungere la classe invisible quando la parte 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 emette un event nel modulo: parts. + config.if per l'estensione delle parti. Questo può essere molto utile per alcuni sistemi di plugin.

Buona conoscenza 3:

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

ON('parts.YOURIFCONDITION', function(element, pagecomponent) {
	// It's executed only when the part is initialized
});

Utilizzare con <ui-component name="part">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="part" path="currentpart" config="if:home;url:/bla/bla/home.html"></ui-component>
<ui-component name="part" path="currentpart" config="if:services;url:/bla/bla/services.html;reload:services_reload"></ui-component>
<ui-component name="part" path="currentpart" config="if:contact;url:/bla/bla/contact.html;reload:contact_reload"></ui-component>

<pre><code>SET(&#39;currentpart&#39;, &#39;home&#39;);</code></pre>

<script>
	var currentpart = '';
</script>