Tutorial: Como implementar uma navegação básica

Se o seu plugin deve exibir seu conteúdo ao longo de várias páginas (geralmente para uma lista de um conteúdo e uma página a partir dessa lista), você deve delegar a navegação entre essas páginas para o plugin, a fim de ser capaz de beneficiar de transições nativas. 

Para isso, a API Plugin e o JavaScript ToolKit oferecem dois métodos diferentes : 
- navegação push (em profundidade) 
- navegação Modal (transversais) 

Neste exemplo, vamos usar o JavaScript Toolkit. 

1. Objetivo

Neste exemplo, queremos criar um plugin com três páginas: 
- A página principal ( index.html ) 
- A página de detalhes ( detail.html ) 
- Uma página modal ( modal.html ) 

A página principal ( index.html)   irá compreendem duas zonas clicávéis desencadeando uma navegação: uma para a página de pormenor (em navegação impulso) e um para a página modal (em navegação modal). 

Cada uma das duas páginas específicas ( detail.html  e  modal.html ) irá conter uma zona que irá desencadear um retorno dentro da hierarquia de navegação (navegação de volta).

2. 1. Criando a página index.html

Vamos começar por criar a página  index.html . 

Nós vamos criar dois <div> correspondentes aos hotspots, e envolvem ações (via o atributo onclick), respectivamente desencadeantes métodos  gbNavigatePush e  gbNavigateModal . 

Vamos criar os dois <div> correspondente às duas áreas clicáveis, e associadas ainda Principais ações (via o atributo onclick) provocando os métodos  gbNavigatePush  e  gbNavigateModal , respectivement. 

Este é o conteúdo do <body> tag no  index.html  arquivo: em ambos os casos, o primeiro argumento do método corresponde à página de destino (sem a extensão), eo segundo aos dados need to que podem ser transmitidas para a página de destino.

<h1>Home</h1> 
<div class="zone" onClick="javascript:gbNavigatePush('detail', {});">Push Navigation</div> 
<br /> 
<div class="zone" onClick="javascript:gbNavigateModal('modal', {});">Modal Navigation</div>
 

3. 2. Criar as páginas detail.html e modal.html

Nestas duas páginas, vamos criar um <div> que corresponderá a uma zona clickable permitindo um retorno de volta dentro de navegação. Este será feito através de uma chamada para o método  gbNavigateBack .  

Este é o conteúdo do <body> tag na  detail.html  arquivo:

<h1>Detail</h1>
<div class="zone" onClick="javascript:gbNavigateBack();">Back Navigation</div>
 
Este é o conteúdo do <body> tag na  modal.html  arquivo:
 
<h1>Modal</h1>
<div class="zone" onClick="javascript:gbNavigateBack();">Back Navigation</div>

4. 3. Resultado

Agora você pode facilmente testar a navegação através do download este plugin amostra da  página GitHub, ou seguindo os passos descritos nos n.os 1 e 2.
  • 0 utilizatori au considerat informația utilă
Răspunsul a fost util?

Articole similare

Plugin: Tempo por Georeferência

Neste exemplo de um plugin, vamos fazer uma solicitação para a API REST do site Weather...