Journey.js

Journey.js

? Uma biblioteca JavaScript leve e fácil de usar para criar visitas guiadas interativas, personalizáveis ​​e acessíveis em seus sites ou aplicativos da Web!

v2.2.0

Que recursos o Journey.js tem?

• Dependências zero e extremamente leve!
• Escrito em TypeScript, permitindo maior suporte para React, Angular e outras bibliotecas!
• API completa disponível por meio de funções públicas.
• Totalmente estilizado em CSS/SASS e compatível com a Biblioteca de Bootstrap.
• Suporte ao tema CSS completo (usando: variáveis ​​raiz, com um tema no modo escuro padrão).
• Gatilhos personalizados para ações (quando a caixa de diálogo é mostrada para um elemento, ou oculto, etc.).
• Chaves de atalho (clique aqui para ver a lista completa).
• Suporte aos parâmetros do URL do navegador (clique aqui para ver a lista completa).
• Dicas sugerem o suporte (não incluído na jornada principal).
• 51 Traduções de idiomas disponíveis!
• Dicas de ferramentas personalizáveis.
• Mostre pontos de progresso, ou uma barra de progresso, ou ambos!
• Agrupe suas etapas em viagens separadas!
• Suporte em movimento para diálogo!

Onde posso encontrar a documentação?

Toda a documentação pode ser encontrada aqui:

Quais navegadores são suportados?

Todos os navegadores modernos (como Google Chrome, Firefox e Opera) são totalmente suportados.

Quais idiomas são suportados?

• af AFRIKAANS
• ar árabe
• hy Armênio
• be bielorrusso
• bn Bengali
• bg búlgaro
• ca Catalão
• zh chinês (simplificado)
• da dinamarquês
• nl holandês
• en inglêsne (padrão)
• eo Esperanto
• et estoniano
• fa FARSI
• fi finlandês
• fr francês
• fy Frisian
• gl Galian
• ka Georgiano
• de alemão
• el grego
• he hebraico
• hi Hindi
• hu
• is islandês
• id indonésio
• ga Irish
• it italiano
• ja Japanese
• ko coreano
• lv
• lt
• lb Luxemburgo
• ms Malay
• ne Nepali
• no norueguês
• pl Polish
• pt português
• ro Romena
• si cingaleses
• sk Slovak
• sl Slovenian
• es Espanhola
• sv
• tl Tagalog
• ta Tamil
• zh-tw Taiwan
• te Telugu
• th tailandês
• tr TURCO
• uk Unido

Quais são as mudanças mais recentes?

Para ver uma lista de todas as alterações mais recentes, clique aqui.

Como faço para instalar o Journey.js?

Você pode instalar a biblioteca com o NPM no diretório de módulos locais usando o seguinte comando:

npm install jjourney.js

Ou você pode fazer o download da mais recente versão fechada aqui.

Ou você também pode usar os seguintes links 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

Como faço para começar?

Para começar a usar o Journey.js, faça as seguintes etapas:

1. Pré -requisitos:

Certifique -se de incluir a tag "Doctype html" na parte superior do seu HTML, como segue:

 <! DOCTYPE html >

2. Inclua arquivos:

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

3. Ligação do 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 uma lista de todas as opções de ligação disponíveis que você pode usar para "Data-Journey-Js", clique aqui.

Para ver uma lista de todos os gatilhos personalizados disponíveis para "Data-Journey-Js", clique aqui.

4. Terminando:

Para iniciar a jornada, chame a seguinte função pública:

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

É isso! Bom e simples. Consulte o código se precisar de mais ajuda (totalmente documentado).

Como faço para personalizar o Journey.js?

Para personalizar e obter mais do Journey.js, leia a seguinte documentação.

1. Funções públicas:

Para ver uma lista de todas as funções públicas disponíveis, clique aqui.

2. Configuração:

As opções de configuração permitem personalizar como o Journey.js funcionará. Você pode defini -los da seguinte maneira:

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

Para ver uma lista de todas as opções de configuração disponíveis que você pode usar, clique aqui.

Para ver uma lista de todas as opções de configuração disponíveis, gatilhos personalizados que você pode usar, clique aqui.