ForgeKomponenter
sv

Komponenter

j-Part

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

Denna komponent kan hantera olika innehåll asynkroniskt. 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 delen är synlig (alltid)
  • hidden {String} valfritt, en länk till funktion, det körs när delen är dolt (alltid)
  • init {String} är valfritt, en länk till funktion, det körs när delen ä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 delen 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 delen vill visa
  • invisible {Boolean} möjliggör tillägg av invisible-klassen när delen kommer att döljas (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:

Delkomponenten emitterar en event i form: parts. + config.if för förlängning av delar. Detta kan vara mycket användbart för vissa plugin-system.

Bra att veta 3:

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

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

Använd den med <ui-component name="part">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="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>