I've looked around and found several examples of PhoneGap/Cordova-based HTML5 applications for Windows Phone 7, but none of them seem to show you how to make a panorama or a pivot style app, which are some of the main draws of the UI of the OS. I'm looking to build an app that works like these:
Panorama:
Pivot:
I want to build these apps using plain HTML5, CSS3 and JS and use PhoneGap Build to deploy them. I do not wish to use Visual Studio. VS offers two separate controls for panorama or pivot layouts, but in HTML5, there should be just one slider control which can be used for both, with a tweak to allow for a multi-screen column like the 'second item' page in the first example.
I also looked for some IE9-compatible jQuery slider plugins that I could tweak, but 90% of them don't work and the rest are a little too different to try and adapt. For example, this jQuery page slide (sideways) transition works fine in every browser, but degrades to a basic slide up-type effect in the WP7 browser.
I am targeting multiple OSes, but I don't want to replicate the same interface across all. The data source will be common, but I want them to look like natively designed applications on each OS.
Update 1:
Found a scroller/slider plugin that actually responds to touch events on IE Mobile on WP7, but it doesn't snap to the edge of each panel, which is an important aspect of the pano/pivot controls.
Also checked out XUI, which has a plugin called Swipe to detect swipe/tap events, but even with "xui-ie-2.3.2.min.js", the sample does absolutely nothing in IE Mobile.
Update 2:
The closest I've come to finding something like this is the promising jqMetro add-on. It gives you a full-on Metro style including panorama, pivot and native-looking controls, but the most ironic part is that the swipe features don't work on IE Mobile, which means it won't work in the PhoneGap'd application. Tapping on the pivot headings works and switches to that view just fine.
Update 3:
Gave up hybrid app development altogether! :-)