index.zulzul<zk xmlns:w="http://www.zkoss.org/2005/zk/client/attribute">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.min.js"></script>
<?link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/shepherd.css"?>
<script defer="true">
(function() {
$(function () {
const tour = new Shepherd.Tour({
useModalOverlay: true,
defaultStepOptions: {
classes: 'shadow-md bg-purple-dark',
scrollTo: true
}
});
tour.addStep({
id: 'step1',
text: 'pagina da presentare',
attachTo: {
element: '.asd',
on: 'bottom'
},
classes: 'example-step-extra-class',
buttons: [
{
text: 'Next',
action: tour.next
}
]
});
tour.addStep({
id: 'step2',
text: 'titolo del primo paragrafo, riguardante il Lorem ipsum',
attachTo: {
element: '.titolo1',
on: 'right'
},
buttons:[{
text: "Back",
action: tour.back
},
{
text: 'Next',
action: tour.next
}]
})
tour.addStep({
id: 'step3',
text: 'Ecco il paragrafo di cui parlavamo!',
attachTo: {
element: '.step3',
on: 'right'
},
buttons:[{
text: "Back",
action: tour.back
},
{
text: 'Next',
action: tour.next
}]
})
tour.addStep({
id: 'step4',
text: 'titolo del secondo paragrafo, riguardante il proin placerat',
attachTo: {
element: '.titolo2',
on: 'right'
},
buttons:[{
text: "Back",
action: tour.back
},
{
text: 'Next',
action: tour.next
}]
})
tour.addStep({
id: 'step5',
text: 'Ecco il secondo paragrafo di cui parlavamo',
attachTo: {
element: '.step5',
on: 'right'
},
buttons:[{
text: "Back",
action: tour.back
},
{
text: 'Done',
action: tour.next
}]
})
tour.start();
});
}).call(this);
</script>
<window border="normal" title="hello" vflex="1">
<vlayout class="asd">
<label value="Titolo 1" class="titolo1"/>
<space spacing="20" ></space>
<textbox class="step3" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus ornare ante, in ullamcorper diam aliquet et.
Etiam porta neque at ornare semper. Quisque a tortor at magna hendrerit sagittis.
Nam ipsum ante, finibus ut bibendum ut, viverra a ipsum. Integer lacus lorem, fermentum bibendum turpis sit amet,
ultrices pharetra dui. Nulla non nisi vel odio sollicitudin finibus sit amet et ligula. In hac habitasse platea dictumst.
Vestibulum lobortis gravida ante sit amet aliquet. Praesent pharetra sed risus ut bibendum." height="200px" width="300px" multiline="true" />
<space spacing="20" ></space>
<label value="Titolo 2" class="titolo2" />
<space spacing="20" ></space>
<textbox class="step5" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus ornare ante, in ullamcorper diam aliquet et.
Etiam porta neque at ornare semper. Quisque a tortor at magna hendrerit sagittis.
Nam ipsum ante, finibus ut bibendum ut, viverra a ipsum. Integer lacus lorem, fermentum bibendum turpis sit amet,
ultrices pharetra dui. Nulla non nisi vel odio sollicitudin finibus sit amet et ligula. In hac habitasse platea dictumst.
Vestibulum lobortis gravida ante sit amet aliquet. Praesent pharetra sed risus ut bibendum." height="200px" width="300px" multiline="true" />
<space spacing="20" ></space>
</vlayout>
</window>
</zk>