in JS

Crie introduções e guias passo a passo com o Intro.js

Os aplicativos web trazem cada vez mais recursos e features, e, por diversos fatores (usabilidade, falta de informação, etc) muito destes recursos acabam nem sendo utilizados pelos usuários.

Existem diversas formas para demonstrar e guiar o uso de uma aplicação, o Intro.js é uma excelente biblioteca javascript que é utilizada para criar guias passo a passo e introduções de elementos e features de nossos aplicativos.

O Intro.js é composto por um arquivo javascript de aproximadamente 7kb, e de um arquivo de estilo (css) de 3kb, o seu funcionamento consistem em destacar visualmente elementos html que estão marcados com algumas tags especificas, além de criar uma navegação ordenada entre estes elementos.

Começando:

Vamos baixar o  Intro.js do github: https://github.com/usablica/intro.js

Como exemplo de html vou utilizar um exemplo do Twitter Bootstrap

1) Incluir o intro.js e o introjs.css, lembrando de colocar sempre o css no head da pagina e o js o mais baixo possível.Caso seja necessário manter compatibilidade com o Internet Explorer, precisamos utilizar uma css especifica:

css:

    <link rel="stylesheet" type="text/css" href="introjs.css">

    <!--[if lte IE 8]>
      <link href="introjs-ie.css" rel="stylesheet">
    <!-- <![endif]-->

 

js:

    <script type="text/javascript" src="intro.js"></script>
  </body>
</html>

 

2) O Intro.js funciona através de atributos colocados nos elementos que queremos destacar na pagina:

data-intro: texto da descrição do elemento

data-step: numero do passo do elemento

data-position: posição do box de descrição que será renderizado

Ex:

<div class="hero-unit">
  <h1 data-intro="Este é o titulo" data-step="1">Hello, world!</h1>
  <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
  <p ><a href="#" data-intro="Clique aqui para testar" data-step="2" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

 

3) Como ultimo passo, precisamos chamar a função js para iniciar a exibição do guia:

introJs().start();

Após isso, podemos ver o exemplo em uso na seguinte url: http://demo.rodolfofadino.com.br/intro/index.html

image

 

Além deste exemplo, podemos utilizar diversos parâmetros e temos diversas funções para trabalhar com esta biblioteca, a documentação completa está disponível em: https://github.com/usablica/intro.js#api

Meu projeto de exemplo pode ser baixado em:

http://demo.rodolfofadino.com.br/intro/introdemo.zip

Bom, espero que esta dica seja útil,

Estou a disposição para duvidas, criticas e sugestões

Abs

Rodolfo

  • http://tecnologia.minhavida.com.br/2013/04/crie-introdues-e-guias-passo-a-passo-com-o-intro-js/ Crie introduções e guias passo a passo com o Intro.js | Blog de Tecnologia do Minha Vida

    […] (post original) […]

  • Related Content by Tag