Question

我正在使用带有NativeControls / TabBar插件的PhoneGap，它正在为第一页工作。但是，当我按下导航到另一个页面时，插件就会停止生效。

在index.html页面上：

    <script>
        document.addEventListener("deviceready", function() {
            nativeControls = window.plugins.nativeControls;
            nativeControls.createTabBar();              
            console.log("TabBar initiated");
            nativeControls.createTabBarItem(
              "about",
              "About",
              "/www/img/20-gear2.png",
              {"onSelect": function() {
                window.location.href="about.html";
              }}
            );
            nativeControls.createTabBarItem(
              "guide",
              "Guide",
              "/www/img/76-baby.png",
              {"onSelect": function() {
                window.location.href="grid.html";
              }}
            );
            nativeControls.createTabBarItem(
              "ideas",
              "Ideas",
              "/www/img/27-planet.png",
              {"onSelect": function() {
                window.location.href="ideas.html";
              }}
            );
            nativeControls.showTabBar();
            nativeControls.showTabBarItems("about", "guide", "ideas");
        }, false)
    </script>

按任意按钮将其带到相应的HTML页面，并选择正确的选项卡。但是，在此页面上，没有任何选项卡继续工作 - 按Tab键只会突出显示它，但不会将视图重定位到页面。

我尝试将相同的脚本粘贴到其他页面的标题上，但也没有结果。

Answer 1

我之前使用的解决方案是通过AJAX加载所有内容，而不是加载其他.html页面。我在下面提到了一些片段：

在index.html中，我指定了一个DIV来接收每个页面的HTML

<div id="ajaxCont"> </div>

同样在index.html中，我声明了以下函数：

function loadPage(url, onleave, onenter, title) {                               

   // If onleave function specified
   if (onleave) {
      onleave();
   }

   var xmlhttp = new XMLHttpRequest();

   // Callback function when XMLHttpRequest is ready
   xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState == 4){
         if (xmlhttp.status == 200 || xmlhttp.status == 0) {
            document.getElementById('ajaxCont').innerHTML = xmlhttp.responseText;

            // If onenter function specified
            if (onenter) {
                onenter();
            }
         }else {
            document.getElementById('ajaxCont').innerHTML = "Error loading page " + url;
         }
      }
   };

   xmlhttp.open("GET", url , true);
   xmlhttp.send();
}

然后，可以像这样创建每个tabbar项：

tabBar.createItem("contact", "Contact", "/www/img/734-chat.png", {
    onSelect: function() {
       loadPage("contact.html", null, null, "Contact");
    }
});

TabBar与Phonegap不在每个页面上工作

1 个答案: