Biblioteca de JavaScript del Tour de características dinámicas-Tiny Tour

Vista prévia

Descripción

Tiny Tour es una biblioteca JavaScript minimalista y dinámica que se utiliza para guiar a los usuarios a través de un recorrido por su aplicación Web.

Funcionamiento

Incluya los archivos de Tiny Tour en la página HTML como esta:

<link href="tour.min.css" rel="stylesheet">
<script src="tour.min.js"></script>

Cree un conjunto de elementos DIV donde desee anexar las visitas guiadas.

<div class='one'></div>
<div class='two'></div>
<div class='three'></div>
<div class='four'></div>
<div class='five'></div>

Cree los recorridos dinámicos en JavaScript como estos:

window.tour = new Tour({

padding: 0,

nextText: 'More',

doneText: 'Done',

prevText: 'Less',

tipClasses: 'tip-class active',

steps: [


{



element: ".one",



title: "Tourquoise",



description: "This box is tourqoise!",



position: "right"


},


{



element: ".two",



title: "Red",



description: "Look how red this box is!",



data: "Custom Data",



position: "bottom"


},


{



element: ".three",



title: "Blue",



description: "Almost too blue! Reminds of a default anchor tag.",



position: "bottom"


},


{



element: ".four",



title: "Green",



description: "Trees!",



position: "left"


},


{



element: ".five",



title: "Purple",



description: "Because there should probably be five of these.",



position: "top"


}

]
})

Comience los recorridos.

tour.override('showStep', function(self, step) {

self(step);
})

tour.override('end', function(self, step) {

self(step);
})

tour.start();