Question

I am using XCode version 4.2 and PhoneGap version 1.5.0 to develop iOS app. Using the following code, I was able to add tab bar on the page, but I couldn’t make it to navigate to another page on selection. I have created the tab bar using NativeControls plugin of PhoneGap.

function onDeviceReady()
{
    Cordova.exec("NativeControls.createTabBar"        
    var options = "bottom";

    window.onorientationchange = function() {
            var orientation = window.orientation;

            switch(orientation) {
                case 0:

                Cordova.exec("NativeControls.showTabBar", options);


                /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
                document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
                break; 

                case 90:

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
                break;

                case -90: 

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
                break;

                default:

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now the orientation must be -180. default: case: ";
                break;         
            }//end switch
        }//end window.orientationchange

        Cordova.exec("NativeControls.showTabBar", options);
        Cordova.exec("NativeControls.createTabBarItem", "Wineries", "Wineries", null, "1", options);
        Cordova.exec("NativeControls.createTabBarItem", "Wines", "Wines", "www/Wine.png", "2", {onSelect: function() {location.href = "Review.html" }});
        Cordova.exec("NativeControls.createTabBarItem", "Tours", "Tours", null, "3", options);
        Cordova.exec("NativeControls.createTabBarItem", "Non-Mobile", "Non-Mobile", null, "4", options);

        Cordova.exec("NativeControls.showTabBarItems", "Wineries", "Wines", "Tours", "Non-Mobile"); 
        Cordova.exec("NativeControls.selectTabBarItem", "Wineries");
}

But this code is not working at all for changing the page on selection.

Cordova.exec("NativeControls.createTabBarItem", "Wines", "Wines", "www/Wine.png", "2", {onSelect: function() {location.href = "Review.html" }});

EDIT Same happens when I use the following code. Should I repeat the same code on second page? If so on which method I should invoke this?

    function onDeviceReady()
    {            

        var nc = window.plugins.nativeControls;

        nc.createTabBar();
        nc.createTabBarItem("Wineries", "Wineries", "www/grape.png", {onSelect: function() {location.href = "index.html" }});
        nc.createTabBarItem("Wines", "Wines", "www/Wine.png", {onSelect: function() {location.href = "Review.html" }});
        nc.createTabBarItem("Tours", "Tours", "www/tour.png", null);
        nc.createTabBarItem("Non-Mobile", "Non-Mobile", "", null);
        nc.showTabBar();
        nc.showTabBarItems("Wineries", "Wines", "Tours", "Non-Mobile");
        nc.selectTabBarItem("Wineries");
    }

Answer 1

Just found a way around for my problem. Instead of assigning a new html page to each tab, connected it to functions. On each call, it changes the body content accordingly. But, still I would like to know if any other solution exists!!

function onDeviceReady()
{            
    var title = "WineWeb";
    nc = window.plugins.nativeControls;

    nc.createTabBar();
    nc.createTabBarItem("Wineries", "Wineries", "www/grape.png", {onSelect: Wineries});
    nc.createTabBarItem("Wines", "Wines", "www/Wine.png", {onSelect: Review});
    nc.createTabBarItem("Tours", "Tours", "www/tour.png", null);
    nc.createTabBarItem("Non-Mobile", "Non-Mobile", "", null);
    nc.showTabBar();
    nc.showTabBarItems("Wineries", "Wines", "Tours", "Non-Mobile");
    nc.selectTabBarItem("Wineries");
}

function Wineries () {

    nc = window.plugins.nativeControls;
    nc.setNavBarTitle("Wineries");
    nc.hideLeftNavButton();

    document.getElementById('Review').style.display='none';
    document.getElementById('Wineries').style.display='block';
    document.getElementById('AboutUs').style.display='none';
}