j-Page

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Este componente pode lidar com diferentes conteúdos de forma asíncrona. o componente tem a mesma funcionalidade que j-Part. Se o elemento não contém nenhum conteúdo então o componento descarrega o conteúdo de acordo com o url definido na configuração.

NEW path pode conter {String Array}

Configuração:

url {String} requerido, um endereço URL relativo
if {String} exigido, condição, é comparado com o valor dentro de path (NEW: suporta vários caminhos divididos pelo comma)
reload {String} opcional, um link para a função function(init) {}, é executado quando a página é visível (todas as vezes)
hidden {String} opcional, um link para a função, é executado quando a página está escondida (todas as vezes)
init {String} opcional, um link para a função, é executado quando a página é visível e on-time
default {String} opcional, um alias curto para DEFAULT(default)
hide {Boolean} opcional, elemento auto-escondido se a condição if não for válida (default: true)
cleaner {Number} opcional, tempo idle (em minutos) para o funcionamento da limpeza (default: 0)
clean {String} opcional, um link para a função, é executado antes da página é limpa
loading {Boolean} opcional, permite o carregamento através de SETTER('loading') (default: true)
path {String} opcional, o componente substitui todas as frases ~PATH~ e CLASS para o valor do path no modelo baixado
replace {String} opcional, um link para o método function(content) { return content } que pode modificar o modelo baixado
absolute {Boolean} opcional, permite posição absoluta (default false)
check {String} opcional, um link para a função function(next) { next(); }, é executado quando a página quer mostrar
invisible {Boolean} permite a adição de classe invisible quando a página está indo para esconder (default: false)
delay {Number} um atraso (em ms) para a remoção da classe invisible e ocultar loading (default: 500)
autofocus {Boolean/String} concentra a primeira entrada, textarea (default: false)
delayloading {Number} um atraso (em ms) para esconder loading (default: 800)
id {String} um identificador personalizado para substituir frases ~ID~ no HTML importado (default: vazio)

É bom saber 1:

Todas as frases CLASS e ~PATH~ serão substituídas por config.path ou config.if automaticamente
Todas as frases ~ID~ serão substituídas por config.id automaticamente

É bom saber 2:

O componente da página emite um event no formulário: pages. + config.if para a extensão de páginas.

É bom saber 3:

Se o componente da página não estiver dentro do âmbito, então o valor do config.if substituirá os caracteres ? em todas as chaves de configuração.

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

Use-o com <ui-component name="page">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>