j-Intro

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Configurazione:

if {String} condizione per la visualizzazione dell'intro, è paragonato al valore all'interno di path
next {String} opzionale, testo per il pulsante passo successivo (default: Next)
close {String} opzionale, testo per il pulsante passo vicino (default: Done)
page {String} opzionale, un collegamento al metodo function(page) {} viene eseguito quando la pagina è cambiata
exec {String} opzionale, un collegamento al metodo function() {} viene eseguito quando l'introduzione è chiusa
check {String} opzionale, un collegamento al metodo function(done) {} viene eseguito quando si fa clic sul pulsante ultimo
remove {Boolean} opzionale, quando true poi il componente sarà rimosso dopo la chiusura (default: false)
closebutton {Boolean} mostra il pulsante vicino all'angolo superiore destro (default: false)
width {Number} a larghezza massima (default: 400)
Altezza di height {Number} (default: 300)
NEW: delay {Number} un ritardo per il pulsante next tra i clic
NEW: nexticon {String} un'icona fatta (default: ti ti-chevron-right)
NEW: doneicon {String} un'icona fatta (default: ti ti-check-circle)

Buono sapere:

Ogni pulsante con name="next" sarà utilizzato come pulsante next
Ogni pulsante con name="close" sarà utilizzato come pulsante close
un collegamento con la classe next fornisce sarà utilizzato come pulsante next
un collegamento con la classe close fornisce sarà utilizzato come pulsante close

Utilizzare con <ui-component name="intro">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>