j-Page

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Este componente puede manejar diferentes contenidos de forma asincrónica. El componente tiene la misma funcionalidad que j-Part. Si el elemento no contiene ningún contenido entonces el componente descarga el contenido de acuerdo con el url definido en la configuración.

NEW path puede contener {String Array}

Configuración:

Se requiere url {String}, una dirección URL relativa
Se requiere if {String}, condición, se compara con el valor dentro de path (NEW: admite múltiples rutas divididas por comma)
reload {String} opcional, un enlace a la función function(init) {}, se ejecuta cuando la página está visible (siempre)
hidden {String} opcional, un enlace para funcionar, se ejecuta cuando la página está oculta (siempre)
init {String} opcional, un enlace para funcionar, se ejecuta cuando la página es visible y una vez
default {String} opcional, un alias corto para DEFAULT(default)
hide {Boolean} elemento opcional que se oculta automáticamente si la condición if no es válida (predeterminado: true)
cleaner {Number} opcional, tiempo de inactividad (en minutos) para la ejecución de la limpieza (predeterminado: 0)
clean {String} opcional, un enlace para funcionar, se ejecuta antes de que se limpie la página
loading {Boolean} opcional, habilita la carga mediante SETTER('loading') (predeterminado: true)
path {String} opcional, el componente reemplaza todas las frases ~PATH~ y CLASS por el valor de path en la plantilla descargada.
replace {String} opcional, un enlace al método function(content) { return content } que puede modificar la plantilla descargada
absolute {Boolean} opcional, habilita la posición absoluta (por defecto false)
check {String} opcional, un enlace a la función function(next) { next(); }, se ejecuta cuando la página quiere mostrarse
invisible {Boolean} permite agregar la clase invisible cuando la página se va a ocultar (predeterminado: false)
delay {Number} un retraso (en ms) para eliminar la clase invisible y ocultar loading (predeterminado: 500)
autofocus {Boolean/String} enfoca la primera entrada, área de texto (predeterminado: false)
delayloading {Number} un retraso (en ms) para ocultar loading (predeterminado: 800)
id {String} un identificador personalizado para reemplazar frases ~ID~ en el HTML importado (predeterminado: vacío)

Es bueno saberlo 1:

todas las frases CLASS y ~PATH~ serán reemplazadas por config.path o config.if automáticamente
todas las frases ~ID~ serán reemplazadas por config.id automáticamente

Es bueno saberlo 2:

El componente de página emite un event con el formato: pages. + config.if para ampliar las páginas. Esto puede resultar muy útil para algunos sistemas de complementos. Ejemplo:

Es bueno saberlo 3:

Si el componente de la página no está dentro del alcance, entonces el valor de config.if reemplazará los caracteres ? en todas las claves de configuración.

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

Úselo con <ui-component name="page">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>