j-Intro

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Configuración:

if {String} condición para mostrar la introducción, se compara con el valor dentro de path
next {String} opcional, texto para el botón del siguiente paso (predeterminado: Next)
close {String} opcional, texto para el botón de paso de cierre (predeterminado: Done)
page {String} opcional, un enlace al método function(page) {} se ejecuta cuando se cambia la página
exec {String} opcional, un enlace al método function() {} se ejecuta cuando se cierra la introducción.
check {String} opcional, un enlace al método function(done) {} se ejecuta cuando se hace clic en el último botón
remove {Boolean} opcional, cuando true el componente se eliminará después del cierre (predeterminado: false)
closebutton {Boolean} muestra el botón de cerrar en la esquina superior derecha (predeterminado: false)
width {Number} un ancho máximo (predeterminado: 400)
Altura height {Number} (predeterminado: 300)
NUEVO: delay {Number} un retraso para el botón next entre clics
NUEVO: nexticon {String} un icono de hecho (predeterminado: ti ti-chevron-right)
NUEVO: doneicon {String} un icono de hecho (predeterminado: ti ti-check-circle)

Es bueno saberlo:

cada botón con name="next" se utilizará como botón next
cada botón con name="close" se utilizará como botón close
un enlace con la clase next se utilizará como botón next
un enlace con la clase close se utilizará como botón close

Úselo con <ui-component name="intro">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes 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>