Wednesday, November 10, 2010

jQuery Mobile - Programmatic Page Transitions Pt. 1

Working a few weeks now with jQuery mobile, I find myself loving it more and more. Today I came across an issue though. How would I mimic the action clicking a link. Why would I want to do this do you ask? Well in jQuery mobile, you can specify the link and the transition you would like to navigate to as long as it is an element on the page. jQuery mobile then handles the click on those buttons and links to make sure that they cause the proper transitions. What if you don't want a button to cause the transition?

With some initial digging, I came across the fact that jQuery mobile watches the hashchange event. This event is fired when the location.hash ends up changing. I found this and was like perfect!



Voila! Programatically changing pages and jQuery navigating for me. Unfortunately this wasn't good enough. How do I make page transitions happen other than "slide"?

More digging occurred and a simple solution arose. jQuery mobile actually exposes a new method called ajaxClick. This is a jQuery.fn extension method. How we can use this to solve the problem of programatically transitioning is as follows:

No comments:

Post a Comment