If your plugin must display it's content over several pages (typically for a list of a content and a page from that list), you must delegate the navigation between these pages to the plugin in order to be able to benefit from native transitions.

To do so, the Plugin API and the GoodBarber JavaScript ToolKit offer two different methods:
- Push navigation (in depth)
- Modal navigation (transversal)

In this example, we're going to use the GoodBarber JavaScript ToolKit. 


1

Objective

In this example, we want to create a plugin with three pages:
- The main page (index.html)
- A detail page (detail.html)
- A modal page (modal.html)

The main page (index.html)  will comprise two clickable zones triggering a navigation: one towards the detail page (in push navigation) and one to the modal page (in modal navigation).

Each of the two targeted pages (detail.html and modal.html) will contain a zone that will trigger a return within the navigation hierarchy (back navigation).


2

1. Creating the index.html page

Nous allons commencer par créer la page index.html.

Nous allons y créer les deux <div> correspondant aux zones cliquables, et y associer des actions (via l'attribut onClick) déclenchant respectivement les méthodes gbNavigatePush et gbNavigateModal.

We will create the two <div> corresponding to the two clickable zones, and associate further actions (via the attribute onClick) triggering the methods gbNavigatePush and gbNavigateModal, respectively.

This is the content of the <body> tag in the index.html file:
<h1>Home</h1>
<div class="zone" onClick="javascript:gbNavigatePush('detail', {});">Push Navigation</div>
<br />
<div class="zone" onClick="javascript:gbNavigateModal('modal', {});">Modal Navigation</div>

In both instances, the first argument of the method corresponds to the targeted page (without the extension), and the second to the data that may need to be transmitted to the destination page.


3

2. Creating the detail.html and modal.html pages

In these two pages, we will create a <div> that will correspond to a clickable zone allowing a return back within the navigation. This will done through a call to the method gbNavigateBack. 

This is the content of the <body> tag in the detail.html file:

<h1>Detail</h1>
<div class="zone" onClick="javascript:gbNavigateBack();">Back Navigation</div>
 
This is the content of the <body> tag in the modal.html file:
<h1>Modal</h1>
<div class="zone" onClick="javascript:gbNavigateBack();">Back Navigation</div>


4

3. Result

You can now easily test the navigation by downloading this sample plugin from GoodBarber's GitHub page , or by following the steps outlined in paragraphs 1 and 2.


Otros artículos