j-Intro

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

Configuratie:

De voorwaarde van if {String} voor de indruk is vergeleken met de waarde binnen path
next {String} optioneel, tekst voor de volgende stap knop (default: Next)
close {String} optioneel, tekst voor de dichtste stapknop (default: Done)
page {String} optioneel, een link naar de methode function(page) {} wordt uitgevoerd wanneer de pagina veranderd
exec {String} optioneel, een link naar de methode function() {} wordt uitgevoerd wanneer de intro is gesloten
check {String} optioneel, een link naar de methode function(done) {} wordt uitgevoerd wanneer het op de laatste knop wordt geklikt
remove {Boolean} optioneel, wanneer true dan de component wordt verwijderd na afsluiting (default: false)
closebutton {Boolean} toont de dichtste knop in de rechterhoek (default: false)
width {Number} een maximale breedte (default: 400)
De hoogte van de height {Number} (de standaard: 300)
NEW: delay {Number} een vertraging voor de next-knop tussen klikken
NEW: nexticon {String} een gedaan icoon (default: ti ti-chevron-right)
NEW: doneicon {String} een gedaan icoon (default: ti ti-check-circle)

Goed om te weten:

Elke knop met name="next" wordt gebruikt als next
Elke knop met name="close" wordt gebruikt als close
Een link met de next-klasse wordt gebruikt als een next-knop
Een link met de close-klasse wordt gebruikt als een close-knop

Gebruik het met <ui-component name="intro">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="intro" path="showme" config="if:myintro" class="hidden">
	<figure>A</figure>
	<figure>B</figure>
	<figure>C</figure>
	<figure>D</figure>
	<figure>E</figure>
</ui-component>

<script>
	SET('showme', 'myintro', 2000);
</script>