j-Page

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

Diese Komponente kann verschiedene Inhalte asynchron verarbeiten. Die Komponente hat die gleiche Funktionalität wie j-Part. 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 die Seite sichtbar ist (immer)
hidden {String} optional, ein Link zur Funktion, sie wird ausgeführt, wenn die Seite ausgeblendet ist (immer)
init {String} optional, ein Link zur Funktion, sie wird einmalig ausgeführt, wenn die Seite sichtbar ist
default {String} optional, ein kurzer Alias für DEFAULT(default)
hide {Boolean} optional, Element automatisch ausblenden, wenn die if-Bedingung 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 die Seite bereinigt 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 die heruntergeladene Vorlage geändert werden kann
absolute {Boolean} optional, ermöglicht absolute Position (Standard false)
check {String} optional, ein Link zur Funktion function(next) { next(); }, sie wird ausgeführt, wenn die Seite angezeigt werden soll
invisible {Boolean} ermöglicht das Hinzufügen der Klasse invisible, wenn die Seite 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~-Sätze werden automatisch durch config.id ersetzt

Gut zu wissen 2:

Die Seitenkomponente gibt ein event in der Form pages. + config.if zum Erweitern von Seiten aus. Dies kann für einige Plugin-Systeme sehr nützlich sein. Beispiel:

Gut zu wissen 3:

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

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

Verwenden Sie es mit <ui-component name="page">. 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="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>