j-Intro

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Konfigurácia:

if {String} podmienka pre zobrazenie úvodu, je porovnaná s hodnotou v rámci path
next {String} voliteľné, text pre tlačidlo ďalšieho kroku (predvolené: Next)
close {String} voliteľné, text pre tlačidlo zatvorenia kroku (predvolené: Done)
page {String} voliteľné, odkaz na metódu function(page) {} sa vykoná pri zmene stránky
exec {String} voliteľné, odkaz na metódu function() {} vykoná sa pri zatvorení úvodu
check {String} voliteľné, odkaz na metódu function(done) {} vykoná sa po kliknutí na posledné tlačidlo
remove {Boolean} voliteľné, pri true sa komponent po zatvorení odstráni (predvolené: false)
closebutton {Boolean} zobrazuje tlačidlo zatvorenia v pravom hornom rohu (predvolené: false)
width {Number} maximálna šírka (predvolené: 400)
Výška height {Number} (predvolené: 300)
NEW: delay {Number} oneskorenie tlačidla next medzi kliknutiami
NEW: nexticon {String} ikona dokončenia (predvolené: ti ti-chevron-right)
NEW: doneicon {String} ikona dokončenia (predvolené: ti ti-check-circle)

Je dobré vedieť:

každé tlačidlo so name="next" sa použije ako tlačidlo next
každé tlačidlo so name="close" sa použije ako tlačidlo close
ako tlačidlo next sa použije prepojenie s triedou next.
ako tlačidlo close sa použije prepojenie s triedou close

Použite ho so <ui-component name="intro">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>