1
<button id="demo-init-sample" class="ls-btn-primary ls-btn-tour">Iniciar Tour</button>

Utilizamos o plugin hopscotch (criado pelo LinkedIn) e aplicamos a identidade visual do Locaweb Style.

Como funciona:

Primeiramente é necessário inserir a classe ls-btn-tour no botão que iniciará o Tour.

Dentro de cada projeto existe um tour.js (específico), que determina onde exibirá o Tour Guiado, qual o próximo passo e assim por diante. Em cada passo podemos implementar outras funções de navegação ou mesmo de eventos simulando interações, vale a pena ler a documentação do plugin para entender melhor sobre esses eventos e funções.

Cookie

Ao carregar pela primeira vez, a caixa de informação onde está o botão para iniciar o Tour é exibida aberta logo após o carregamento da página, nas próximas vezes ela estará sempre fechada, a não ser que o cookie seja excluído.

Acessibilidade

Implementamos navegação via teclado, utilizando seta pra frente (prosseguir), trás (voltar) e a tecla ESC (fechar).

*elem é o nome da variável do tour.js da página específica.

Abaixo segue um exemplo dos códigos necessários para implementar o Tour Guiado.

Chamando a função de navegação dentro do seu projeto, propositalmente com window.load

1
2
3
4
$(window).on('load', function() {
  //Onde tourDashboard é a variável que recebe os eventos do plugin no exemplo abaixo
  locastyle.guidedTour.init(tourDashboard);
});

O valor do target (dentro do tour.js) server como referência de exibição do Tour Guiado. Na tabela abaixo alguns exemplos

tour.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var configTour = {
  id: 'tourDemo',
  selectors: {
    init:  '#demo-init'
  },
  // Tradução dos botões
  i18n: {
    nextBtn: "Próximo",
    prevBtn: "Anterior",
    doneBtn: "Ok",
    skipBtn: "Sair",
    closeTooltip: "Fechar"
  },
  bubbleWidth: 250,
  showPrevButton: true,
  steps: [{
    target: 'passo1',
    title: 'Titulo passo 1',
    content: 'descrição passo 1',
    placement: 'bottom',
    arrowOffset: 'center'
  },{
    target: 'passo2',
    title: 'Título passo 2',
    content: 'texto passo 2.',
    placement: 'right',
    arrowOffset: 'center',
    yOffset: 'center'
  }]
};