Guía de aplicación guiada adaptable en JavaScript-Shepherd

Vista prévia

Descripción

Shepherd es una biblioteca de JavaScript que crea una guía visual interactiva y dinámica para que los usuarios aprendan sobre las nuevas características y funciones de la aplicación Web.

Totalmente adaptable, fácil de usar y compatible con dispositivos móviles.

La biblioteca requiere Tether. js que es una biblioteca del lado cliente para hacer que los elementos absolutamente posicionados se adjunten a los elementos de la página de manera eficiente.

Funcionamiento

Importe el Tether. js y Shepherd. js necesarios en el documento.

<script src="tether.js"></script>
<script src="shepherd.js"></script>

Crea un nuevo tour.

let myTour = new Shepherd.Tour({


// options here
});

Agregue pasos para el recorrido.

myTour.addStep('step-1', {

title: 'Step 1',

text: 'This is Step 1',

attachTo: '.where-to-attach',

advanceOn: '.advance-on'
});

Comience el recorrido.

myTour.start();

Todas las opciones de Tour predeterminadas.

let myTour = new Shepherd.Tour({



// an array of Steps


steps: [],



//
Default options for Steps


defaults: {}



})

Todas las opciones de paso predeterminadas.

myTour.addStep('stepName', {


// The text in the body of the step. It can be one of four types:

// HTML string

// Array of HTML strings

// HTMLElement object

// Function to be executed when the step is built. It must return one the three options above.

text: '',



// Step title

title: '',


// where to attach the step to

attachTo: '',


//
returns a promise. When the promise resolves, the rest of the show code for the step will execute.

beforeShowPromise: function (){},


// extra classes

classes: '',


// an array of buttons to add to the step.

 buttons: [{


text: '',


classes: '',


action: function (){},


events: {'mouseover': function(){}},

}],


// An action on the page which should advance shepherd to the next step.

 // It can be of the form "selector event", or an object with those properties.

 // For example: ".some-element click", or {selector: '.some-element', event: 'click'}.

 // It doesn't have to be an event inside the tour, it can be any event fired on any element on the page.

 // You can also always manually advance the Tour by calling myTour.next().

advanceOn: '',


// shows cancel link

showCancelLink: true or false


// scrolls the page to the current step

scrollTo: true or false


// You can define show, hide, etc events inside when

when: {}

});

API del Tour.

// Methods
myTour.addStep(id, options)
myTour.getById(id)
myTour.next()
myTour.back()
myTour.cancel()
myTour.hide()
myTour.show([id])
myTour.start()
myTour.getCurrentStep()
myTour.on(eventName, handler, [context])
myTour.off(eventName, [handler])
myTour.once(eventName, handler, [context])

// Events
myTour.on('start', function(){

// ...
})

myTour.on('show', function(){

// ...
})

myTour.on('hide', function(){

// ...
})

myTour.on('cancel', function(){

// ...
})

myTour.on('complete', function(){

// ...
})

API de Step.

// Methods
myStep.show()
myStep.hide()
myStep.cancel()
myStep.complete()
myStep.scrollTo()
myStep.isOpen()
myStep.destroy()
myStep.on(eventName, handler, [context])
myStep.off(eventName, [handler])
myStep.once(eventName, handler, [context])

// Events
myStep.on('destroy', function(){

// ...
})

myStep.on('show', function(){

// ...
})

myStep.on('hide', function(){

// ...
})

myTour.on('cancel', function(){

// ...
})

myTour.on('complete', function(){

// ...
})

myTour.on('before-hide', function(){

// ...
})

myTour.on('before-show', function(){

// ...
})

Registro de cambios

12/27/2018

• v2.0.0-beta.35