2012-02-19 13 views
22

¿Cuál es la mejor manera de proporcionar un recorrido rápido de una aplicación web con información contextual sobre herramientas?La mejor manera de proporcionar un "recorrido de información sobre herramientas"

Caso de uso:

  • usuario navega a la aplicación de web
  • alguna forma de ventana emergente le preguntará al usuario si desea una visita guiada de la interfaz
  • usuario puede hacer clic en Siguiente en cada información sobre herramientas que se muestra la
  • siguiente
  • usuario puede cancelar el viaje en cualquier momento haciendo clic en algún tipo de salida X o el botón

¿hay una biblioteca fácil por ahí que hace esto?

Gracias!

+2

He escrito un corto [revisión] [1] acerca de páginas de orientación y webapp visitas que recientemente fue publicado en el dailyjs.com. En él puede encontrar varias soluciones de bricolaje para implementar esta funcionalidad. También le invitamos a consultar nuestra [orientación en la página como servicio] [2] en iridize.com. Espero que sea la mejor manera de proporcionar esto a sus usuarios, y estoy bastante seguro de que sería el más fácil. [1]: http://dailyjs.com/2012/11/02/on-screen-guidance-intro [2]: https: // iridize.com – odedbd

Respuesta

25

La forma más fácil de hacerlo es con la biblioteca de paso a paso de javascript ToolTip de Jeff Pickhardt Guider-JS. Es muy fácil de usar (aunque también tiene varias características muy avanzadas) y hace exactamente lo que usted describió.

Puede consultar this excellent example 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 usa ampliamente en optimizely.com para proporcionar ayuda y guías paso a paso para la interfaz de usuario.

ACTUALIZACIÓN: ZURB Foundation ahora mantiene la excelente biblioteca de JavaScript "Joyride" tooltip tour.

+2

¡Exactamente lo que esperaba! –

+1

Recuerde marcar esto como "Aceptado" si responde su pregunta. – BenjaminRH

+1

Joyride es una excelente opción. ¡Solo reduzco mi tiempo de desarrollo a la mitad! – carbontwelve

0

También puede escribir la parte del recorrido usando 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í está una prueba rápida del concepto que se debe mostrar 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); 

​JSFiddle link

Cuestiones relacionadas