j-Page

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent kan hantera olika innehåll asynkroniskt. komponenten har samma funktionalitet som j-Part. Om elementet inte innehåller något innehåll sedan komponenten laddar ner innehållet enligt url definierad i konfigurationen.

NEW path kan innehålla {String Array}

Konfigurera:

url {String} krävs, en relativ URL
if {String} krävs, villkoret är jämfört med värdet inom path (NEW: stöder flera vägar uppdelade av comma)
reload {String} valfritt, en länk till funktion function(init) {}, det körs när sidan är synlig (alltid)
hidden {String} valfritt, en länk till funktion, det körs när sidan är dold (alltid)
init {String} är valfritt, en länk till funktion, det körs när sidan är synlig och på tid
default {String} alternativ, en kort alias för DEFAULT(default)
hide {Boolean} valfritt, självhäftande element om if-förhållandet inte är giltigt (default: true)
cleaner {Number} valfritt, idle tid (i minuter) för att köra rengöring (default: 0)
clean {String} valfritt, en länk till funktion, det körs innan sidan rengörs
loading {Boolean} valfritt, möjliggör laddning via SETTER('loading') (default: true)
path {String} alternativ, komponenten ersätter alla ~PATH~ och CLASS fraser för värdet av path i nedladdningen
replace {String} valfritt, en länk till metoden function(content) { return content } som kan ändra nedladdade mallar
absolute {Boolean} alternativ, möjliggör absolut position (default false)
check {String} valfritt, en länk till funktion function(next) { next(); }, det körs när sidan vill visa
invisible {Boolean} möjliggör tillsättning av invisible-klassen när sidan kommer att gömma (default: false)
delay {Number} en försening (i ms) för avlägsnande av invisible klass och döljande av loading (default: 500)
autofocus {Boolean/String} fokuserar den första inmatningen, textarea (default: false)
delayloading {Number} en försening (i ms) för att dölja loading (default: 800)
id {String} en anpassad identifierare för att ersätta ~ID~ fraser i den importerade HTML (default: tom)

Bra att veta 1:

Alla CLASS och ~PATH~ fraser ersätts automatiskt med config.path eller config.if.
Alla ~ID~-fraser ersätts automatiskt med config.id

Bra att veta 2:

Page component emitterar en event i formuläret: pages. + config.if för förlängning av sidor.

Bra att veta 3:

Om sidan komponenten inte är inom räckhåll ersätter värdet från config.if ? tecken i alla konfigurationsnycklar.

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

Använd den med <ui-component name="page">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>