Latest web development tutorials

Fundação Joyride

Joyride é o efeito de um assistente de função JavaScript, crie uma instância da seguinte forma:

Exemplos

<! - Elementos que controlam o passeio pára ->
<Id H3 = "primeira"> Primeira parada! </ H3>
<H3 id = "segunda"> Segunda paragem! </ H3>

<- O Joyride :! deve ser colocado na parte inferior da página, mas dentro <body> ->
<ol class = "lista Joyride " data-joyride>
<Li data-id = "primeira ">
<P> A primeira parada. O passeio começou! </ P>
</ Li>
<Li data-id = "segunda ">
<H4> segunda parada </ h4 >
<P> Qualquer HTML válida irá funcionar dentro do Joyride. </ P>
</ Li>
<Li-botão de dados = "End ">
<H4> Final Parar </ h4 >
<P> O passeio é longo. Você pode voltar para a paragem anterior ou fechá-la. </ P>
</ Li>
</ Ol>

<! - Iniciar Joyride na inicialização - >
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ( 'Joyride', 'start');
})
</ Script>
tente »

Exemplos de analítico

O exemplo acima, criamos dois elementos, cada um tem um ID separado. Dois elementos define o início e posições finais joyride.

Nós <ol> ou <ul> para adicionar o elemento data-joyride propriedade e .joyride-list classe para criar um joyride. Você precisa defini-lo no cabeçalho do documento (no <body> na cabeça). Usado em cada lista <li> elementos, cada um adicionando data-id=" value " atributo. valor do atributo deve ser o mesmo antes do elemento id. Assim, a primeira função de navegação <h3> elemento usando id = "primeiro" deve ser data-id <li> elemento = "primeiro" acordo de valor.

Se você não consegue parar o id, ele irá mostrar uma caixa de modal.

Finalmente, Joyride requer JavaScript para inicializar-lo, o código é: $(document).foundation('joyride', 'start');