ForgeComponentes
es

Componentes

j-Part

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

Este componente puede manejar diferentes contenidos de forma asincrónica. 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 pieza está visible (siempre)
  • hidden {String} opcional, un enlace a la función, se ejecuta cuando la pieza está oculta (siempre)
  • init {String} opcional, un enlace a la función, se ejecuta cuando la pieza está 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 a la función, se ejecuta antes de limpiar la pieza
  • 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 pieza quiere mostrarse
  • invisible {Boolean} permite agregar la clase invisible cuando la pieza 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 pieza emite un event en la forma: parts. + config.if para extensión de piezas. Esto puede resultar muy útil para algunos sistemas de complementos. Ejemplo:

Es bueno saberlo 3:

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

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

Úselo con <ui-component name="part">. 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="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>