ForgeComponenten
nl

Componenten

j-Page

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component kan verschillende inhoud asynchronisch beheren.De component heeft dezelfde functionaliteit als j-Part. Als het element geen inhoud bevat dan downloads de content volgens de url gedefinieerd in configuratie.

  • NEW path kan {String Array} bevatten

Configuratie:

  • url {String} vereist, een relatieve URL
  • if {String} vereist, voorwaarde, het is vergeleken met de waarde binnen de path (NEW: ondersteunt meerdere paden verdeeld door de comma)
  • reload {String} optioneel, een link naar de functie function(init) {}, wordt uitgevoerd wanneer de pagina zichtbaar is (alleen)
  • hidden {String} optioneel, een link naar de functie, het wordt uitgevoerd wanneer de pagina verborgen is (altijd)
  • init {String} optioneel, een link naar de functie, het wordt uitgevoerd wanneer de pagina zichtbaar is en op tijd
  • default {String} optioneel, een korte alias voor DEFAULT(default)
  • hide {Boolean} optioneel, auto-verborgen element als de if niet geldig is (default: true)
  • cleaner {Number} optioneel, idle tijd (in minuten) voor het uitvoeren van de reiniging (default: 0)
  • clean {String} optioneel, een link naar de functie, het wordt uitgevoerd voordat de pagina wordt gereinigd
  • loading {Boolean} optioneel, mogelijk opladen via SETTER('loading') (default: true)
  • path {String} optioneel, de component vervangt alle ~PATH~ en CLASS uitdrukkingen voor de waarde van de path in de gedownload template
  • replace {String} optioneel, een link naar de methode function(content) { return content } die het gedownload template kan wijzigen
  • absolute {Boolean} optioneel, mogelijkheid voor absolute positie (default false)
  • check {String} optioneel, een link naar de functie function(next) { next(); }, wordt uitgevoerd wanneer de pagina wilt
  • invisible {Boolean} maakt het mogelijk om de invisible-klasse toe te voegen wanneer de pagina gaat verbergen (default: false)
  • delay {Number} een vertraging (in ms) voor het verwijderen van de invisible klasse en het verbergen van loading (default: 500)
  • autofocus {Boolean/String} richt zich op de eerste input, textarea (default: false)
  • delayloading {Number} een vertraging (in ms) voor het verbergen van loading (default: 800)
  • id {String} is een aangepaste identificator voor het vervangen van ~ID~ zintuigen in de geïmporteerde HTML (default: leeg)

Goed om te weten 1:

  • Alle CLASS en ~PATH~ De woorden worden vervangen door config.path Of config.if Automatisch
  • Alle ~ID~-afdrukken worden automatisch vervangen door config.id

Goed om te weten 2:

Pagina component geeft een event in het formulier: pages. + config.if voor de uitbreiding van pagina's. Dit kan zeer nuttig zijn voor sommige pluginsystemen.

Goed om te weten 3:

Als de pagina-component niet binnen het bereik ligt, dan vervangt de waarde van de config.if de ? tekens in alle configuratieschijven.

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

Gebruik het met <ui-component name="page">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>