Question

我正在使用XCode版本4.2和PhoneGap版本1.5.0开发iOS应用程序。使用以下代码，我能够在页面上添加标签栏，但我无法在选择时导航到另一个页面。我使用PhoneGap的NativeControls插件创建了标签栏。

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");
}

但是这段代码根本没有用于更改选择页面。

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

编辑当我使用以下代码时也会发生相同的情况。我应该在第二页上重复相同的代码吗？如果是这样，我应该调用哪个方法？

    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

刚刚找到解决问题的方法。不是将新的html页面分配给每个选项卡，而是将其连接到功能。在每次通话时，它会相应地更改正文内容。 但是，我仍然想知道是否存在任何其他解决方案 !!

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';
}

Answer 2

我遇到了这个问题，而我的方法虽然密集，却使用了像backbone.js这样的框架。我设置了一个路由器，它根据url调用各种视图（例如#newsfeed）。这很有效，因为您可以轻松地将这些视图与模型和模板联系起来。

相关代码看起来像这样。这是基于http://blog.viison.com/post/11097185009/how-to-switch-views-using-backbonejs的完整示例。

var ApplicationRouter = Backbone.Router.extend({

    initialize: function(el) {
        this.el = el;          
        this.newsfeedView = new NewsContentView({template: '#newsfeed-template'});
    },

    onDeviceReady: function() {

        plugins.tabBar.createItem("feed", "", "tabButton:Contacts", {onSelect: function() {location.href = "#newsfeed" }});
    },

    routes: {
        "": "newsfeed",
        "newsfeed": "newsfeed",
    },

    newsfeed: function() {
        console.log('switch to newsfeed');
        this.switchView(this.newsfeedView);
        this.setActiveEntry('#newsfeed');
    },
});

PhoneGap NativeControls Tabbar选择

2 个答案: