ons-navigator

[OnsenUI]

A component that provides page stack management and navigation. This component does not have a visible content.

Click here to see the original article

[raffyuy]

I’d appreciate to know what goes in [options]. I mean, sure, it’s a Parameter object. What’s that?

[Fran Diox]

@raffyuy: Right below options object description you can see what should go inside it. For example, options.animation.

[raffyuy]

@fran-diox: Oh cool didn’t notice that. My bad. :)

[iceweasel]

Hi, How to use resetToPage/pushPage animations slide left to right and/or top to bottom ?
Thanks.

[munsterlander]

@iceweasel if you are wanting to implement them, just use:

myNavigator.resetToPage('myPage.html', {animation: "slide" });
myNavigator.resetToPage('myPage.html', {animation: "lift" });

If that is not what you were asking for, could you clarify your question?

[iceweasel]

@munsterlander:
When I pushPage myNavigator.resetToPage(‘myPage.html’, {animation: “slide” });
Page just move “right” to “left”. I want to move “left” to “right”.
And myNavigator.resetToPage(‘myPage.html’, {animation: “lift” });
It just move “bottom” to “top”, but I want slide “top” to "bottom"
Thanks.

[iceweasel]

@iceweasel said:

@munsterlander:
When I use myNavigator.resetToPage(‘myPage.html’, {animation: “slide” });
Page just move “right” to “left”. I want to move “left” to “right”.
And myNavigator.resetToPage(‘myPage.html’, {animation: “lift” });
It just move “bottom” to “top”, but I want slide “top” to “bottom”
:D
Thanks.

[munsterlander]

@iceweasel Oh! Ok, now I see what you want to do. The answer is located here: http://stackoverflow.com/questions/29115915/how-to-change-slide-direction-for-resettopage Which includes example code, but basically you just create your own animations. The code here is that example for reverse slide: http://codepen.io/frankdiox/pen/azQMZE

[iceweasel]

@munsterlander: Oh yeah! @@

[jokorivai]

@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:

1. Navigating: MainPage>pushPage>pushPage
2. Hardware Backbutton: popPage>popPage>exit app

Is there a way to prevent exit app, just stay on the MainPage?

[munsterlander]

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

[Fran Diox]

@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 your ons-navigator, not window.navigator.

[claudioc]

Is it expected that every pushPage (or bringPageTop) will fire a init event, even if the page has been put on the stack already?

[claudioc]

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?

[munsterlander]

@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

[Fran Diox]

@claudioc Navigator is better. You can save your data on destroy (or hide) event and put it back on init event :thumbsup:

[claudioc]

@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 the lift 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 and prev 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!

[habib]

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 !

[sahizbadafahad1]

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 ?