ons-navigator


  • Onsen UI

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

    Click here to see the original article



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


  • Onsen UI

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



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



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



  • @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?



  • @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 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.



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



  • @munsterlander: Oh yeah! @@



  • @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?



  • 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


  • Onsen UI

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



  • Is it expected that every pushPage (or bringPageTop) will fire a init 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


  • Onsen UI

    @claudioc Navigator is better. You can save your data on destroy (or hide) event and put it back on init 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 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!



  • 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 ?


  • Onsen UI

    @sahizbadafahad1 Just call myNavigator.pushPage(...); myMenu.closeMenu(); together. You have an example with splitter here.


Log in to reply