JQueryMobile - SplitView for Android phoneGap

In jQueryMobile, they provide a SplitView resource plugin which is rather cool. You can see it yourself at the link below.

Here, I provide some tip on using SplitView with phoneGap and Android 3.1 tablet

1. You have to use the jQuery mobile js and css file given in the build. It seems that latest 1.0 stable version has alignment issue.

2. You can use jQuery 1.7.1 for this library

3. The order of css and js files is important. It is advised to include them in the following order

jquery.mobile.css
jquery.mobile.splitview.css
jquery.mobile.grids.collapsible.css
jquery-1.7.1.js
jquery.mobile.splitview.js
jquery.mobile.js
iscroll-wrapper.js
iscroll.js

4. Add the following at your main activity java class after super.loadUrl("file:///android_asset/www/index.html");

this.appView.getSettings().setUseWideViewPort(true);

setUseWideViewPort(true) make the WebView to have a normal desktop viewport. If false, it will use it own dimension and SplitView is unable to detect the layout correctly.

Reference:
http://jquerymobile.com/resources/