How to navigate within pages
-
Hello Everyone,
I am new to Onsen but i have been trying to get myself on the track for a few days now but i have been hooked down by one annoying problem PLEASE HELP ME!! I was able to navigate using tabbar but i do not know how to navigate within one page for example if i click on a Get Started button it should take me to the next page.
-
You need an ons-navigator element to implement a stack navigation to your app. You can find an example in the documentation ons-navigator
In most of my apps i use a tabbar as main navigation and the stack navigation to push/pop sub-pages. To do so i set the ons-navigator element in my index and use the tabbar as page:
<ons-navigator id="navigator" page="tabbar.html"></ons-navigator>
Now you can use a querySelector to access the navigator and handle your stack management. Here is an example of pushing a page to your stack:
document.querySelector('#navigator').pushPage('yoursubpage.html', {data: {title: 'subpage Title', content: 'subpage content'}});
In the documentation is shown how you can set an “init”-eventListener to get the pushed data. In my example the “title” and the “content” i want to set on the page. Hope this helps…
-
Hi,
Thank very much it helps @mjessen i was able to implement it and it worked but there is one issue again… After pushing to sub-pages the tabbar disappeared the tabbar appears at the landing page alone… Dunno know maybe i am doing something wrong… Please i want the tabbar to show on all pages. both main pages and subpages…Thank you so much in advance…
-
You can handle the tabbar visibility with the following code
document.querySelector('#yourTabbarId').setTabbarVisibility(true)
Maybe it is better to this inside the prepush-Event and not inside the init
-
@amco If you want to keep the tabbar, you have to include your
ons-navigator
as a child of the tabbar, not as a parent. Therefore, put it in the tabbar page where you want the navigation. You can have several navigators if necessary, one on each tabbar page
-
@Fran-Diox i actually declare ons-navigator as the layout like this
<ons-navigator id=“myNavigator” page=“tabbar.html”></ons-navigator>
I now have a template tag with the id tabbar.html that is extending my tabbar in the ons-navigator like this
<template id=“tabbar.html”>
<ons-page id=“tabbar-page”>
<ons-tabbar position=“bottom”>
<ons-tab page=“home.html” label=“Home” icon=“ion-home” active></ons-tab><ons-tab page="LogBook.html" label="Log Book" icon="ion-ios-book"> </ons-tab> <ons-tab page="LogBook.html" label="Find" icon="ion-ios-search-strong"> </ons-tab> <ons-tab page="LogBook.html" label="Support" icon="ion-person-stalker"> </ons-tab> <ons-tab page="LogBook.html" label="More" icon="ion-more"> </ons-tab> </ons-tabbar> </ons-page> </template>
How can i make th ons-navigator the child of tabbar. Please can you explain more looking at my code above. Thanks in advance
-
@amco Just move your tabbar to
index.html
(without<template>
tag) and place a navigator in everyons-tab
's page where you need navigation. Quick example here. This pattern is normally used without sliding animations but that’s up to you.
-
@Fran-Diox Yeah!!! Is working fine now. The tabbar is showing on all the pages i need them to sho Thank you very much i really appreciate. Being able to fix that i am having another issue now on my next page… Dunno maybe you can help with this as well
I have a design with Select Input, so what i want to do is after i select any option at of the options i should now click on next button to take me to next page base on what i select… Dunno maybe you understand if yes is there any suggestion for me? Thanks.
-
@amco Not sure where exactly you have the issue. You can just read the select value on button click and then
myNavigator.pushPage('nextPage', { data: { selectValue: ... } })
.
-
@Fran-Diox thanks for getting back to me ASAP. I searched all through the internet maybe i can see something to read as you mentioned ( You can just read the select value on button click ) but i found nothing yet.
Here is my problem again… I have SELECT tag with 3 options and a button called NEXT. So what i want to do is that when i select any option and i clicked on NEXT button it should go to another page. Thanks
-
@amco So can’t you do something like this?
function buttonClick() { document.querySelector('ons-navigator') .pushPage('nextPage', { data: { value: document.querySelector('ons-select').value } }); }
Actually, the page with the
ons-select
remains in the DOM so you can even access it withdocument.querySelector
when you are in the next page already…
-
@Fran-Diox ons-back-button isn’t working inside ons-navigator? Any idea?
-
@mjessen I know this topic is quite old but i just feel like explaining this part the more…
You will have to first set navigator inside your index file like this… <ons-navigator id=“navigator” page=“tabbar.html”></ons-navigator>
You will now create a query selector inside your script tag just like this… document.querySelector(’#navigator’).pushPage(‘yoursubpage.html’, {data: {title: ‘subpage Title’, content: ‘subpage content’}});
You will now go to your href and add the name of the file just like this… yoursubpage.html
I hope this helps anybody in need of it