HTML5 Layout Like Android Tab and Swipe Layout

Question

I am working on a HTML5 Mobile app for a client, but he wants something that I have only ever seen in native (android) java apps. The layout he is looking for is a cross between this template

http://carbonyzed.co.uk/Websites/Jason/sites/3/templates/

and the style of this android app - or many others (groupon is a great example).

_{(source: blogspot.com)}

_{(source: dayviews.com)}

The 2 functions which are pivotal, are having the left and right menubars pop out as they do in the linked template, and then 3 tabbed swipe style pages (one for today, tomorrow and future).

The only way I can think of doing this is by using a jquery slider or something, and having text in it instead of image, however I am sure, there must be a better way of doing it, hence why I have come here.

From my research, I am sure that I must impliment JQUERY MOBILE or some sort of JQUERY scripts to do this.

If anybody has any advice / can point me in the right direction, or even show me a few template of designs like this (which I can't seem to see) I would be greatly appreciated.

Thanks

Henry

Answer 1

First of all it can be done, but you are going to piss blood before you finish this project.

Main problem here is jquery mobile (and other similar products) are not intended for that much customization. JQM can be used with jQuery UI components but it tends to brake with to much heavy customization (UI components rendering can fail sometimes because of JQM page cashing.

Other problem is compatibility between JQM running on iPhone and JQM running on Android phones. iPhone is much better platform for JQM. Android has huge problems with page transitions (android versions 2.X). It was fixed with version 4.X.

Even if you can create a bullet proof app you can still have problems with wrapper framework like phobegap/cordoba.

My advice to you is to create a native app.