Journey.js

Viaje.js

? ¡Una biblioteca de JavaScript liviana y fácil de usar para crear visitas guiadas interactivas, personalizables y accesibles en sus sitios web o aplicaciones web!

v2.2.0

¿Qué características tienen Journey.js?

• ¡Dependencias cero y extremadamente livianos!
• ¡Escrito en TypeScript, permitiendo un mayor soporte para React, Angular y otras bibliotecas!
• API completa disponible a través de funciones públicas.
• Totalmente diseñado en CSS/SASS y compatible con la biblioteca Bootstrap.
• Soporte completo del tema CSS (usando: variables raíz, con un tema predeterminado de modo oscuro).
• Disparadores personalizados para acciones (cuando el diálogo se muestra para un elemento, o oculto, etc.).
• Teclas de acceso directo (haga clic aquí para ver la lista completa).
• Los parámetros de URL del navegador soportan (haga clic aquí para ver la lista completa).
• Sugerencias de sugerencias (no incluido en el viaje principal).
• 51 Traducciones de idiomas disponibles!
• Tras de herramientas personalizables.
• ¡Muestre puntos de progreso, o una barra de progreso, o ambos!
• ¡Agrupe sus pasos en viajes separados!
• ¡Soporte en movimiento de diálogo!

¿Dónde puedo encontrar la documentación?

Toda la documentación se puede encontrar aquí:

¿Qué navegadores son compatibles?

Todos los navegadores modernos (como Google Chrome, Firefox y Opera) son totalmente compatibles.

¿Qué idiomas son compatibles?

• af Afrikaans
• ar
• hy Armenio
• be bielorruso
• bn bengalí
• bg búlgaro
• ca catalán
• zh chino (simplificado)
• da danés
• nl holandés
• en inglés (predeterminado)
• eo Esperanto
• et estonio
• fa Farsi
• fi finlandés
• fr francés
• fy
• gl
• ka georgiano
• de alemán
• el griego
• he hebreo
• hi hindi
• hu húngaro
• is islandés
• id Indonesio
• ga irlandés
• it italiano
• ja japonés
• ko coreano
• lv
• lt lituano
• lb Luxemburguish
• ms Malay
• ne nepalí
• no
• PL pl
• pt Portugués
• ro rumano
• si sinhalesa
• sk eslovaco
• sl esloveno
• es español
• sv
• tl tagalo
• ta tamil
• zh-tw taiwanés
• te telugu
• th
• tr
• uk

¿Cuáles son los cambios más recientes?

Para ver una lista de todos los cambios más recientes, haga clic aquí.

¿Cómo instalo Journey.js?

Puede instalar la biblioteca con NPM en su directorio de módulos locales utilizando el siguiente comando:

npm install jjourney.js

O bien, puede descargar la última versión con zonas con cierre aquí.

O también puede usar los siguientes enlaces de CDN:

 https://cdn.jsdelivr.net/gh/williamtroup/[email protected]/dist/journey.min.js
https://cdn.jsdelivr.net/gh/williamtroup/[email protected]/dist/journey.js.min.css

¿Cómo empiezo?

Para comenzar a usar Journey.js, haga los siguientes pasos:

1. Requisitos previos:

Asegúrese de incluir la etiqueta "DocType HTML" en la parte superior de su HTML, de la siguiente manera:

 <! DOCTYPE html >

2. Incluya archivos:

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

3. Enlace del elemento DOM:

< button data-journey-js = " { 'title': 'Get Version', 'description': 'Logs the current version of Journey.js to the developers console.', 'order': 6 } " onclick = " console . log ( $journey . getVersion () ); " >Get Version</ button >

Para ver una lista de todas las opciones vinculantes disponibles que puede usar para "Data-Journey-JS", haga clic aquí.

Para ver una lista de todos los desencadenantes personalizados disponibles que puede usar para "Data-Journey-JS", haga clic aquí.

4. Terminando:

Para comenzar el viaje, llame a la siguiente función pública:

< script > 
  $journey . start ();
</ script >

¡Eso es todo! Agradable y simple. Consulte el código si necesita más ayuda (totalmente documentada).

¿Cómo hago para personalizar Journey.js?

Para personalizar y obtener más fuera de Journey.js, lea la siguiente documentación.

1. Funciones públicas:

Para ver una lista de todas las funciones públicas disponibles, haga clic aquí.

2. Configuración:

Las opciones de configuración le permiten personalizar cómo Funcionará Journey.js. Puedes configurarlos de la siguiente manera:

< script > 
  $journey . setConfiguration ( {
      safeMode : false
  } );
</ script >

Para ver una lista de todas las opciones de configuración disponibles que puede usar, haga clic aquí.

Para ver una lista de todos los desencadenantes de opción de configuración disponibles que puede usar, haga clic aquí.