What are you trying to achieve with jQTouch? AFAIK is a lightweight mobile platform that allows you to create a one-page mobile web application by showing and hiding the div. Three main things this gives you:
- Mobile Mobile Elements
- CSS3 transitions between pages (slide, pop, fading, etc.).
- A navigation structure that automatically jumps between pages based on the user interface element that you touch (for example, touching the anchor with href
#about will automatically jump from the current page to the page (div) with about id)
I assume that you would like to save 1) and 2) to make your life easier, and for BackBone to handle 3) - it makes sense to me, since the structure of BackBone MVC and the distribution of events between views are good. If so, really 1) and 2) are just CSS tricks. So keep jqtouch.css and ditch jqtouch.js . Thus, you get a good design and can programmatically perform transitions in your BackBone images, without jqTouch, which interfere with navigation.
If you do, be sure to wrap your entire application in <div id="jqt"></div> so that the stylesheet <div id="jqt"></div> and erases all the elements and buttons of the list. If you want to use the transition, use jQuery / Zepto to add the correct CSS to each page:
$("#toPage").addClass('slideleft in current'); $("#fromPage").addClass('slideleft out');
This will trigger the CSS3 transitions specified in jqtouch.css . A list of available transitions can be found on line jqtouch.js , line 61 onwards. Just change the slideleft in the above code for a different animation name to achieve a different transition.
Denial of responsibility! I have not really tried this, just the theory and I can’t work ... although I am trying to achieve just that, use the nice mobile interface theme with BackBone, and this is the closest I can find. When I get a chance, I will try to do it in the next few days. If you get there first and try, please let me know how you deal!