javascript - bootstrap - La mejor manera de proporcionar un "recorrido de información sobre herramientas"
tooltip jquery ui ejemplos (2)
La forma más fácil de hacer esto es con la guía de la Guider-JS herramientas de JavaScript de Guider-JS Jeff Pickhardt. Es muy fácil de usar (aunque también tiene varias características muy avanzadas) y hace exactamente lo que describió.
Puede ver este excelente ejemplo de un recorrido de información sobre herramientas hecho con Guider-JS.
Si desea ver un ejemplo de trabajo en un sitio de producción, se utiliza ampliamente en optimizely.com para proporcionar ayuda y guías para la interfaz de usuario.
ACTUALIZACIÓN: La Fundación ZURB ahora mantiene la excelente biblioteca de javascript de recorrido de herramientas "Joyride" .
¿Cuál es la mejor manera de proporcionar un recorrido rápido de una aplicación web utilizando información sobre herramientas contextual?
Caso de uso:
- usuario navega a la aplicación web
- alguna forma de ventana emergente que pregunta si el usuario desea una visita guiada de la interfaz
- El usuario puede hacer clic en siguiente en cada información sobre herramientas para ver la siguiente.
- el usuario puede cancelar el recorrido en cualquier momento haciendo clic en algún tipo de salida X o botón
¿Hay una biblioteca fácil por ahí que hace esto?
¡Gracias!
También puede escribir la parte del recorrido usted mismo utilizando una lista vinculada con un iterador que siempre llama a una devolución de llamada para configurar la información sobre herramientas y otra para cerrarla. A continuación, puede utilizar cualquier script de información sobre herramientas que desee. Aquí hay una rápida prueba de concepto que debería mostrarte lo que quiero decir:
var toolTipList = {
tooltips: [],
currentTooltip: {},
addTooltip: function(tooltip){
var currentTail = this.tooltips.length > 0 ? this.tooltips[this.tooltips.length - 1] : {};
var newTail = {
tooltip: tooltip,
prev: currentTail
};
currentTail.next = newTail;
this.tooltips.push(newTail);
},
initialize: function(){
this.currentTooltip = this.tooltips[0];
this.currentTooltip.tooltip.callback();
},
next: function(){
if(this.currentTooltip.next){
this.currentTooltip.tooltip.close();
this.currentTooltip = this.currentTooltip.next;
this.currentTooltip.tooltip.callback();
}
}
};
for(var i = 0; i < 10; i++){
toolTipList.addTooltip({
callback: function(){
// called every time next is called
// open your tooltip here and
// attach the event that calls
// toolTipList.next when the next button is clicked
console.log(''called'');
},
close: function(){
// called when next is called again
// and this tooltip needs to be closed
console.log(''close'');
}
});
}
toolTipList.initialize();
setInterval(function(){toolTipList.next();}, 500);