Como usar o bootstraop tour?
Bootstrap Tour
Veja abaixo como aplicar o bootstrap tour em sistemas web.
Começando Este plug-in foi inicialmente planejado para ser um plug-in de tour simples e fácil de usar, mas agora podemos usá-lo da maneira que quisermos, pois eles têm arquivos JavaScript e CSS separados para usuários do Bootstrap e para não usuários do Bootstrap. Se você estiver usando o Bootstrap, você deve incluir: <link href = “css / bootstrap-tour.min.css” rel = “stylesheet"> <script src = “js / bootstrap-tour.min.js”> </script> Adicione esses dois arquivos depois de todas as dependências, e por dependências quero dizer todo o CSS e JS do Bootstrap e depois do jQuery. Se você não usar o Bootstrap, você precisará incluir a versão autônoma deste plugin: <link href = “css / bootstrap-tour-standalone.min.css” rel = “stylesheet"> <script src = “js / bootstrap-tour-standalone.min.js”> </script> Neste caso, a única dependência que você tem é o jQuery e esta rota usaremos com nosso exemplo.
Iniciando nosso tour
Digamos que temos dois elementos em nossa página e esses dois elementos são aqueles sobre os quais gostaríamos que o tour atuasse. O primeiro iria apenas dar as boas-vindas ao visitante e o segundo iria dizer-lhe do que trata a nossa aplicação.
<h1 class = "one"> Meu aplicativo incrível </h1>
<div class = "two">
<img src = "http://lorempixel.com/300/200" />
</div>
Para criar nosso passeio, primeiro precisamos instanciar um novo passeio:
var tour = novo tour ({
// Código para nosso tour
});
Depois disso, precisamos criar as etapas do nosso tour, e cada etapa tem 3 opções principais: o elemento que queremos direcionar, o título do pop-up e o conteúdo. Portanto, nossos dois pop-ups seriam parecidos com:
var tour = novo tour ({
degraus: [
{
elemento: ".um",
título: "Bem-vindo",
conteúdo: "Bem-vindo ao nosso aplicativo, faça este tour para se familiarizar com ele."
},
{
elemento: ".two",
título: "Esta imagem",
conteúdo: "Neste aplicativo, geramos imagens de espaço reservado aleatórias para qualquer caso."
}
]
});
Se quisermos começar nosso tour imediatamente, primeiro precisamos iniciá-lo e, em seguida, iniciá-lo:
tour.init ();
tour.start ();
E se você carregar sua página agora, você pode ver que assim que a página carrega o mesmo acontece com o nosso Tour, você pode alterar a forma como ela carrega, se, por exemplo, você queria que carregasse apenas depois que um elemento fosse clicado, você pode fazer isso envolvendo a função de início em um manipulador de eventos de clique:
$ (‘. Elemento’). Click (function () {
tour.start ();
});
Você pode ver um exemplo nesta caneta que criei.
A API
Estes são os princípios básicos do que você precisa para começar a usar o tour do Bootstrap, mas como de costume, há muitas outras opções que você pode aproveitar, como:
Nome - Aqui é onde você pode definir o nome do seu passeio e isso permite que você tenha vários passeios na mesma página, apenas dando-lhes nomes diferentes.
Etapas - aqui você define as etapas do passeio, é a opção principal e a única de que você realmente precisa para começar a trabalhar.
Container - Por padrão, os pop-ups são anexados ao corpo, mas aqui você pode alterar isso e anexá-los a qualquer elemento em sua página.
Teclado - define se o usuário pode navegar entre pop-ups com o mouse. O padrão é verdadeiro.
Armazenamento - por padrão, os objetos são armazenados em localStorage, mas você também pode defini-lo como window.sessionStorage ou desabilitar o armazenamento completamente para que o tour comece sempre que o usuário recarregar.
Pano de fundo - mostra um fundo em um estilo Lightbox que destaca a etapa atual.
Duração - Usando a duração, você pode definir uma expiração para as etapas, definindo-a para algo como 2s se o usuário não tiver passado para a próxima etapa nesse tempo, ela se moverá automaticamente.
Modelo - aqui você pode criar um modelo personalizado para seus pop-ups e, em seguida, personalizá-lo da maneira que desejar com CSS. Esta é uma ótima função se você deseja controle total.
Funções - Temos também algumas funções que irão executar em um determinado tempo, temos onStart, onEnd, onShow, onShown, onHide, onHidden, onNext, onPrev, onPause, onResume. Todas essas funções podem ser usadas como funções de retorno de chamada, quando necessário.
Estas são algumas das opções que temos; se você for até a página da API do Bootstrap Tour, verá que há ainda mais opções das quais você pode tirar proveito.
Este não é um plugin jQuery geral, é na verdade um muito específico que você não usará em todos os sites, mas é um que nos dá uma maneira simples de realizar algo que, à primeira vista, levaria um tempo considerável para configurarmos nós mesmos .
******************************************************
