Using jQuery Swipe Transition For Navigation In Your Mobile App
Posted: November 3rd, 2011 | Author: max | Filed under: Features | Tags: features, JavaScript, jQuery, jQuery Mobile | 15 Comments »Navigating between pages in Tiggr is very simple. You first add an HTML event to a component, such as click for a button, and then add Navigate To Page action where you select the page to navigate:
This works very well, but it will replace the entire page. An alternative way to navigate or transition between pages is to use jQuery swipe transition which in my opinion looks better. Here is how to do it. You use the same event, such as click for a button. Then, we add Run Custom JavaScript action with the following code:
1 | navigateTo('end', 's'); |
The first argument is the page name. The second argument indicates that a swipe transition should be done. That’s it. You are probably wondering why not do this via Navigate To Page action? It will be possible soon. We are going to add a check box so you will be able to select what type of transition you would like, a page replace or swipe. For now, this is a very simple work around.
Want to try it? Open this app on your device:
Or just scan this QR code:
if thats a jquery function doesn’t it require the $ or jquery.navigateTo? i also can’t find navigateTo in any jquery or jquery mobile docs.
im having trouble with this for back button functionality. its not animating properly. also, i’m losing all my data (from a rest call) navigating back to the previous screen. how can i save the state the data was in before clicking through?
ok i see that navigateTo is a tiggr api method but in the docs it doesn’t show that it accepts a transition parameter OR is it that tiggr’s navigateTo is the equivalent to setting the navigateTo action from the tiggr UI?
just to clarify my issues here are back button transition AND data disappearing when navigating away then back to screen that contained the data
@3adam16ster: yes, navigateTo() is Tiggr JS API (sorry, we are going update the API very soon). How are you going back to the page? Do you use a regular refresh or Ajax navigation?
i’ve tried navigateTo like in this tutorial and navigateTo through the Tiggr UI
@adam16ster: so it’s Ajax navigation both way? The result should stay on the screen in when using Ajax. Can you share the app URL with me? You can share it privately with [email protected] if you would like.
shared
@adam16ster: I ran the app, but nothing happens when I click the button. What should happen? Also, do you mind if we continue this at http://gotiggr.com/forum - it will be easier there.
opened the question here: http://getsatisfaction.com/gotiggr/topics/data_lost_when_leaving_then_returning_to_screen
when ‘search near by’ is clicked, a list should be populated from cocoafish servers, then on a list item click will take you to place details that contains the back button.
the issue could be that i haven’t stopped working on the app.
the tiggr api docs doesn’t show that a 2nd parameter can be passed. also what other options other than ‘s’ can be passed? more specifically what argument do i pass for the swipe transition to go from left-to-right (like going back)?
@adam16ster: the API will be updated. The 2nd parameter can be anything, it’s value is not important. It’s presence determines if navigation is Ajax-based.
This demo is not working on my iPhone. It should remember your selection regarding Veni,Vidi,Vici right? It goes back to default every time.
@Ole: how do you go back? If you are doing a full page refresh, then the value will be reset. You need to do Ajax navigation.
I was just using the demo link on this page.
@Ole: It works like that because the mobile screens are in separate file and there is no check yet whether a particular screen has been loaded or not and thus the screen is loaded again. We are planning to modify how this works and support exactly what you are trying to do.