j-Intro

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Configuration :

Condition if {String} pour l'affichage de l'intro, elle est comparée à la valeur contenue dans path
next {String} en option, texte pour le bouton de l'étape suivante (par défaut : Next)
close {String} en option, texte pour le bouton de fermeture (par défaut : Done)
page {String} facultatif, un lien vers la méthode function(page) {} qui est exécutée lors du changement de page
exec {String} facultatif, un lien vers la méthode function() {} elle est exécutée à la fermeture de l'intro
check {String} facultatif, un lien vers la méthode function(done) {} qui est exécutée lorsqu'on clique sur le dernier bouton
remove {Boolean} facultatif, lorsque true alors le composant sera supprimé après la fermeture (par défaut : false)
closebutton {Boolean} affiche le bouton de fermeture dans le coin supérieur droit (par défaut : false)
width {Number} une largeur maximale (par défaut : 400)
Hauteur height {Number} (par défaut : 300)
NOUVEAU : delay {Number} un délai pour le bouton next entre les clics
NOUVEAU : nexticon {String} une icône terminée (par défaut : ti ti-chevron-right)
NOUVEAU : doneicon {String} une icône terminé (par défaut : ti ti-check-circle)

Bon à savoir :

chaque bouton avec name="next" sera utilisé comme bouton next
chaque bouton avec name="close" sera utilisé comme bouton close
un lien fourni avec la classe next sera utilisé comme bouton next
un lien fourni avec la classe close sera utilisé comme bouton close

Utilisez-le avec <ui-component name="intro">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>