ons-navigator
-
@Fran-Diox sorry to ask this: Is there any way to prevent application from exiting when user click back-button (hardware) and no more page exists in page stack?
Scenario:
- Navigating: MainPage>pushPage>pushPage
- Hardware Backbutton: popPage>popPage>exit app
Is there a way to prevent exit app, just stay on the MainPage?
-
Yes you can and this is done via something like this:
if (navigator.notification.confirm("Are you sure to close the app?", function(index) { if (index === 1) { // OK button navigator.app.exitApp(); // Close the app } } ));
More information is found here: https://onsen.io/guide/overview.html#HandlingBackButton
You might also want to check out these answers here: http://stackoverflow.com/questions/34333774/handling-android-backbutton-in-onsenui-cordova
-
@jokorivai Yep, if you check the section right after the one that @munsterlander linked, Overriding default component handler, you can find the exact answer to your question. Notice that when it says
navigator
it means yourons-navigator
, notwindow.navigator
.
-
Is it expected that every
pushPage
(orbringPageTop
) will fire ainit
event, even if the page has been put on the stack already?
-
Oh, I figured it out that every time I use the “Back” button (
ons-back-button
), the page is popped from the stack and removed from the DOM.Now, the problem is that I am building a “multistep” signup form, so the user should be able to go back and forth of these steps.
Maybe the Navigator is not the ideal component for that? Should I use a carousel maybe?
-
@claudioc You could use a carousel or you could use localStorage to temp store the data. I gave an example of this here: https://community.onsen.io/topic/246/walktrough/6
-
@claudioc Navigator is better. You can save your data on
destroy
(orhide
) event and put it back oninit
event :thumbsup:
-
@Fran-Diox yeah, at the end I am doing exactly that. I was almost OK also with the carousel though. My findings (should some else have the same ideas):
- Carousel can be embedded in a page, which means that the “header” stays put when you change from on item to the other. With a page, the toolbar moves with it
- Carousel can only use the slide animation (or
none
). Cannot use thelift
which I need for a couple of interactions in the form (“Read Terms and Conditions”, for example) - I find the Carousel API a bit nicer (I’d like to have the
next
andprev
method on the navigation stack, for example). Navigation API are a bit confusing
Anyway, it’s amazing how one can be productive with OnsenUI guys. I am so happy to have started to use it. Thanks!
-
I have 2 tab bar and first tab bar have a list in page and i want to click the list for display the list detail in detail-list page with form tab bar , Can I ? Please help me !
-
I am using ons-sliding menu i want to use one-navigator inside the ons-sliding menu, i want to push page from ons-sliding menu, but when i push the page the page is push but the menu remain open
how can i fix it ?
-
@sahizbadafahad1 Just call
myNavigator.pushPage(...); myMenu.closeMenu();
together. You have an example with splitter here.
-
@Fran-Diox Thank you for reply
Yes its working thank you, but it navigate me the two pages, the one where i stay and the another which i put in push page
-
How to set the animation speed of ons-navigator when we push the page ?
-
@sahizbadafahad1 The docs for the navigator in Onsen UI 2 are here. You can check
options.animationOptions
for what you ask.
-
@Fran-Diox Thanks you its working