j-Intro

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

Konfigurera:

if {String} villkor för att visa intro, det är jämfört med värdet inom path
next {String} valfritt, text för nästa steg (default: Next)
close {String} valfritt, text för knappen nära steg (default: Done)
page {String} valfritt, en länk till metoden function(page) {} det körs när sidan ändras
exec {String} valfritt, en länk till metoden function() {} det körs när intro stängs
check {String} valfritt, en länk till metoden function(done) {} det körs när du klickar på sista knappen
remove {Boolean} valfritt, när true då komponenten kommer att tas bort efter stängning (default: false)
closebutton {Boolean} visar nära knappen i högra hörnet (default: false)
width {Number} en maximal bredd (default: 400)
height {Number} höjd (default: 300)
NEW: delay {Number} en försening för next-knappen mellan klick
NEW: nexticon {String} en gjort ikon (default: ti ti-chevron-right)
NEW: doneicon {String} en gjort ikon (default: ti ti-check-circle)

Bra att veta:

Varje knapp med name="next" kommer att användas som next
Varje knapp med name="close" kommer att användas som close
En länk med next-klassen kommer att användas som en next knapp
En länk med close-klassen kommer att användas som en close knapp

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