JQuery Mobile導航欄沒有正確設置

我正在嘗試使用JQuery Mobile創建一個非常簡單的頁面（這是我第一次真正使用它）。我似乎無法讓導航欄正確顯示。 JQuery Mobile頁面上的代碼看起來很簡單，並且我可以最清楚地看到，我正在逐字拷貝它。它顯示了這樣雖然...JQuery Mobile導航欄沒有正確設置

enter image description here

這裏是我的代碼（也，僅供參考，theme.css文件是默認的JQuery CSS文件）：

<html> 
    <head> 
     <title></title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="../css/theme.css" /> 
     <script src="../js/jquery-1.9.1.min.js"></script> 
     <script src="../js/jquery.mobile-1.3.0.min.js"></script> 

     <script type="text/javascript" src="../js/maptest.js"></script> 
    </head> 

    <body> 

     <div data-role="page" id="main"> 
     <div data-role="header"> 
      <div data-role="navbar"> 
       <ul> 
       <li><a href="#" class="ui-btn-active ui-state-persist">Test</a></li> 
       <li><a href="#">Test</a></li> 
       <li><a href="#">Test</a></li> 
       </ul> 
      </div> 
     </div> 

     <div data-role="content"> 
      <ul data-role="listview"> 
       <li>Acura</li> 
       <li>Audi</li> 
       <li>BMW</li> 
       <li>Cadillac</li> 
       <li>Ferrari</liI> 
      </ul> 
     </div> 

     <div data-role="footer"> 
      <p>footer</p> 
     </div> 

    </div> 
    </body> 

</html>

來源

2013-02-26 Vinnie

添加以下到您的網頁：

<code><meta http-equiv="X-UA-Compatible" content="chrome=1"></code>

看來您加載IE。此頁面在IE頁面中加載Chrome框架activex以呈現JQuery使用的webkit樣式表指令。

您還應該認真考慮將navbar放在內容div中。

來源

2014-01-31 02:19:50 Oliver

JQuery Mobile導航欄沒有正確設置

回答

相關問題