Tourist.js: Creare un tuor animato del nostro sito E' un post proveniente da CodeSnippet.biz
Avevamo già parlato di Intro.js, una libreria javascript per creare una presentazione di un sito web. Oggi vogliamo trattare uno script simile e per certi versi anche più completo per creare un tuor del nostro sito web.
Il plugin jQuery in questione è Tourist.js. Tourist.js, come accennato, è simile a Intro.js, consente di fare un tuor guidato del nostro sito web ed è facile da configurare. Una caratteristica da considerare è quella che permette ad un utente di interagire con la visita guidata, forzandolo a completare uno specifico task prima che essa continui. Tourist.js ha come dipendenze Backbone.js e jQuery, jQuery UI è opzionale, se usato consente di abilitare alcuni effetti di transizione da uno step all’altro; dato che utilizza i Bootstrap popovers, è necessario anche il CSS di Bootstrap, solo il CSS.
Per usare Tourist.js bastano pochi accorgimenti. Dopo aver incluso gli script necessari e le dipendenze sopra descritte.
Si passa alla parte JavaScript, questo un esempio di utilizzo base:
content: '<p>Questo è il primo step!</p>',
highlightTarget: true,
nextButton: true,
target: $('#thing1'), //oggetto a cui si riferisce la descrizione
my: 'bottom center',
at: 'top center'
}, {
...
}, ...]
var tour = new Tourist.Tour({
steps: steps,
tipOptions:{ showEffect: 'slidein' }
});
Una volta configurati gli step basta usare tour.start() per avviare la visita guidata. Ovviamente quest’ultima istruzione può essere agganciata ad un evento o quel che sia.
Per tutti gli interessati questo è il sito ufficiale di Tourist.js, questa invece è la documentazione mentre questo è il codice su Github.
