在每個shtml頁面上都包含導航條phonegap

我創建了一個帶有phonegap的webapp，我在每個shtml頁面上都包含一個導航欄使用 當我在瀏覽器中測試它時，它工作正常，但是當我構建並運行phonegap時，不包括navbar。有誰知道爲什麼？在每個shtml頁面上都包含導航條phonegap

更新： 這是我簡單的index.html代碼，沒有的Funktion在這裏實現另一些不是包括導航欄：

<!doctype html> 
<html> 

<head> 
<title> DJKongsy - Home</title> 
</head> 
<body> 
    <!--#include file="navbar.html" --> 
</body> 
</html>

導航欄與引導創建，這是否幫助找出爲什麼它不起作用？

更新2.0：

我在這裏測試Liam的解決方案。

<nav class="navbar navbar-default" role="navigation"> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1"> 
    <ul class="nav nav-pills navbar-left"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li class="active"> <a href="musictab3.shtml">Music</a></li> 
     <li class="active"><a href="abouttab.shtml">About</a></li> 
     <li class="active"><a href="gigs.shtml">Gigs</a></li> 
    </ul> 
    <ul class="nav nav-pills navbar-right"> 
     <li class="active"><a id="userLink" href="logintab.shtml">Log in</a></li> 
    </ul> 

    </div><!-- /.navbar-collapse --> 
</nav> 
<div id="pageContent"> 
    <h1>CONTENT</h1> 
</div> 
<script> 

    $(document).ready(function(){ 
     var user = $.jStorage.get('userInfo'); 
     if(user.username!=''){ 
      document.getElementById('userLink').innerHTML=user.username; 
     } 
     else{ 
      document.getElementById('userLink').innerHTML="Log in"; 
     } 
     $("a").on("click", function(event){ 
      // Prevent the usual navigation behavior 
      event.preventDefault(); 
      $.get($(this).attr("href"), function(data) { 
       var resp = $(data); 
       $("#pageContent").html($("#pageContent", resp).html()); 
       $('#pageContent').load('gigs.shtml #pageContent'); 
      }); 
     }); 
    }); 
</script>

如何在點擊時顯示導航欄中每個選項卡的內容？例如，在div「pageContent」中發生了什麼？

下面的代碼適用於從頁面獲取靜態HTML信息，但它不會運行我的<script>標記中的內容。爲什麼？

$('#pageContent').load('gigs.shtml #pageContent');

來源

2014-02-11 kongshem

能否請您發佈您的代碼 –

要做到這一點，最好的方法（我已經做到了我自己）是讓你的index.html文件內導覽列（不是「包含文件」），然後使用jQuery內容的每個頁面拉入你的家庭/主頁，它的工作非常好。

所以指數：

<html> 
    <head> 
     <title> 
      Blahblah 
     </title> 
    </head> 
    <body> 
     <nav> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="about.html">About</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </nav> 
     <div id="pageContent"> 
      <h1>CONTENT</h1> 
     </div> 
    </body> 
</html>

，然後腳本...

$(document).ready(function(){ 
     $("a").on("click", function(event){ 
      // Prevent the usual navigation behavior 
      event.preventDefault(); 
       $.get($(this).attr("href"), function(data) { 
        var resp = $(data); 
        $("#pageContent").html($("#pageContent", resp).html()); 
       }); 
     }); 
});

來源

2014-02-27 13:56:36 Liam

感謝您的答覆。你確定沒有更簡單和更好的想法嗎？這似乎是做一件簡單事情的一種困難方式。 – kongshem

更簡單嗎？不太確定。更好？我不這麼認爲。這也將有助於您的應用程序的速度，因爲它不再加載頁面和庫，只是中間的內容。 – Liam

好吧，我正在嘗試你的解決方案。如何將來自不同頁面的數據加載到「pageContent」div中。 'event.preventDefault（）'防止onClick事件發生，所以當我點擊導航欄時內容如何改變？查看原始問題中的更新。 – kongshem

在每個shtml頁面上都包含導航條phonegap

回答

相關問題