j-Intro

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

Configuration:

if {String} condition for showing of the intro, it's compared with the value within of path
next {String} optional, text for the next step button (default: Next)
close {String} optional, text for the close step button (default: Done)
page {String} optional, a link to method function(page) {} it's executed when page is changed
exec {String} optional, a link to method function() {} it's executed when the intro is closed
check {String} optional, a link to method function(done) {} it's executed when is clicked on button last button
remove {Boolean} optional, when true then the component will be removed after close (default: false)
closebutton {Boolean} shows close button at the right top corner (default: false)
width {Number} a maximum width (default: 400)
height {Number} height (default: 300)
NEW: delay {Number} a delay for next button between clicks
NEW: nexticon {String} a done icon (default: ti ti-chevron-right)
NEW: doneicon {String} a done icon (default: ti ti-check-circle)

Good to know:

each button with name="next" will be used as next button
each button with name="close" will be used as close button
a link with next class provides will be used as a next button
a link with close class provides will be used as a close button

Use it with <ui-component name="intro">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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>