j-Part

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente kann verschiedene Inhalte asynchron verarbeiten. Wenn das Element keinen Inhalt enthält, lädt die Komponente den Inhalt gemäß dem in der Konfiguration definierten url herunter.

NEW path kann {String Array} enthalten

Konfiguration:

url {String} erforderlich, eine relative URL-Adresse
if {String} erforderlich, Bedingung, es wird mit dem Wert innerhalb von path verglichen (NEU: unterstützt mehrere Pfade geteilt durch comma)
reload {String} optional, ein Link zur Funktion function(init) {}, sie wird ausgeführt, wenn das Teil sichtbar ist (immer)
hidden {String} optional, ein Link zur Funktion, sie wird ausgeführt, wenn der Teil ausgeblendet ist (immer)
init {String} optional, ein Link zur Funktion, sie wird einmalig ausgeführt, wenn das Teil sichtbar ist
default {String} optional, ein kurzer Alias für DEFAULT(default)
hide {Boolean} optional, Element automatisch ausblenden, wenn die Bedingung if nicht gültig ist (Standard: true)
cleaner {Number} optional, Leerlaufzeit (in Minuten) für die Ausführung der Reinigung (Standard: 0)
clean {String} optional, ein Link zur Funktion, sie wird ausgeführt, bevor das Teil gereinigt wird
loading {Boolean} optional, ermöglicht das Laden über SETTER('loading') (Standard: true)
path {String} optional, die Komponente ersetzt alle ~PATH~- und CLASS-Sätze für den Wert von path in der heruntergeladenen Vorlage
replace {String} optional, ein Link zur Methode function(content) { return content }, mit der heruntergeladene Vorlagen geändert werden können
absolute {Boolean} optional, ermöglicht absolute Position (Standard false)
check {String} optional, ein Link zur Funktion function(next) { next(); }, sie wird ausgeführt, wenn das Teil angezeigt werden soll
invisible {Boolean} ermöglicht das Hinzufügen der Klasse invisible, wenn das Teil ausgeblendet wird (Standard: false)
delay {Number} eine Verzögerung (in ms) für das Entfernen der Klasse invisible und das Ausblenden von loading (Standard: 500)
autofocus {Boolean/String} fokussiert die erste Eingabe, Textbereich (Standard: false)
delayloading {Number} eine Verzögerung (in ms) für das Ausblenden von loading (Standard: 800)
id {String} eine benutzerdefinierte Kennung zum Ersetzen von ~ID~-Phrasen im importierten HTML (Standard: leer)

Gut zu wissen 1:

Alle CLASS- und ~PATH~-Sätze werden automatisch durch config.path oder config.if ersetzt
Alle ~ID~-Phrasen werden automatisch durch config.id ersetzt

Gut zu wissen 2:

Die Teilkomponente gibt einen event in der Form parts. + config.if zum Erweitern von Teilen aus. Dies kann für einige Plugin-Systeme sehr nützlich sein. Beispiel:

Gut zu wissen 3:

Wenn die Teilkomponente nicht im Gültigkeitsbereich liegt, ersetzt der Wert aus config.if die ?-Zeichen in allen Konfigurationsschlüsseln.

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

Verwenden Sie es mit <ui-component name="part">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>