j-Intro

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Konfiguration:

Bedingung if {String} für die Anzeige des Intros, es wird mit dem Wert innerhalb von path verglichen
next {String} optional, Text für den nächsten Schritt-Button (Standard: Next)
close {String} optional, Text für den Schritt schließen-Button (Standard: Done)
page {String} optional, ein Link zur Methode function(page) {}, die ausgeführt wird, wenn die Seite geändert wird
exec {String} optional, ein Link zur Methode function() {}, die ausgeführt wird, wenn das Intro geschlossen wird
check {String} optional, ein Link zur Methode function(done) {}, die ausgeführt wird, wenn auf die letzte Schaltfläche geklickt wird
remove {Boolean} optional, bei true wird die Komponente nach dem Schließen entfernt (Standard: false)
closebutton {Boolean} zeigt die Schaltfläche „Schließen“ in der rechten oberen Ecke an (Standard: false)
width {Number} eine maximale Breite (Standard: 400)
height {Number} Höhe (Standard: 300)
NEU: delay {Number} eine Verzögerung für die Schaltfläche next zwischen Klicks
NEU: nexticon {String} ein Fertig-Symbol (Standard: ti ti-chevron-right)
NEU: doneicon {String} ein Fertig-Symbol (Standard: ti ti-check-circle)

Gut zu wissen:

Jede Taste mit name="next" wird als next-Taste verwendet
Jede Taste mit name="close" wird als close-Taste verwendet
Ein Link mit der Klasse next wird als next-Schaltfläche verwendet
Ein Link mit der Klasse close wird als Schaltfläche close verwendet

Verwenden Sie es mit <ui-component name="intro">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>