Recorrido paso a paso con efecto Spotlight-spotlightjs

Vista prévia

Descripción

spotlightjs es una pequeña biblioteca de JavaScript independiente para crear visitas guiadas a través de su aplicación resaltando elementos específicos mientras navega entre los pasos.

Útil para presentaciones pequeñas, características, demostraciones o instrucciones.

Puede personalizar las formas, los colores y los mensajes que se mostrarán.

Funcionamiento

Inserte la hoja de estilo Spotlight. CSS y JavaScript Spotlight. js en el documento.

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

Agregue pasos a la visita guiada.

• ID: ID único
• datos-SP-siguiente: Selector del siguiente paso
• datos-SP-texto: Texto personalizado

<div id="first" data-sp-next="#step-2" data-sp-text="This is the first step.">Hello! Ready to start? Click here!</div>
<div id="step-2" data-sp-next="#step-3" data-sp-text="Just a few more steps...">This is a small plugin that allows the
easy creation of spotlights that could be useful for small presentations, demos, or instructions.</div>
<div id="step-3" data-sp-next="#bye" data-sp-text="Almost there..." data-sp-shape="round">It is customizable. User can select shapes, colors, messages to be displayed...</div>
<div id="last" data-sp-text="You made it till the end!">Bye! This was the end of the presentation</div>

Inicialice la biblioteca de spotlightjs en el primer paso.

var spotlight = new SpotlightJS({


init: "#first"
});

Inicie el recorrido manualmente.

spotlight.start();

También puede especificar los pasos en el código JavaScript de la siguiente manera:

var spotlight = new SpotlightJS({


steps:[



{ selector: "#step-1", text: "This is the first step." },



{ selector: "#step-2", text: "This is the last step.", shape: "round" }


]
});

Más opciones opcionales para personalizar la visita guiada.

var spotlight = new SpotlightJS({



// shadow color


color: "rgba(0, 0, 0, 0.5)",



// click the first step to trigger the tour




initTrigger: false,



// whether to display the next step link


next: true,


nextText: "Next",



// whether to display the previous step link


previous: true,


previousText: "Previous",



// or 'square',


shape: "round",



// whether to display the skip link


skip: true


skipText: "Skip presentation"



});

API methods.

// starts the tour
spotlight.start();

// stops the tour
spotlight.stop();

// goes to the next step
spotlight.goToNextStep();

// back t the previous step
spotlight.goToPreviousStep();

// goes to the first step
spotlight.goToFirstStep();

// goes to a specific step
spotlight.goToStep(n);

// gets the current highlighted selement
spotlight.getCurrentElement();

// gets the selector of the current highlighted selement
spotlight.getCurrentElementSelector();

// gets the current step
spotlight.getStep();

// gets the text associated to the currently highlighted step
spotlight.getText();

// gets the the total number of steps
spotlight.getTotalSteps();