Tutorial : How to implement a basic Navigation
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.
- Push navigation (in depth)
- Modal navigation (transversal)
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).
1. Creating the index.html page
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:
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.
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:
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.
- More articles