jQuery Mobile風格不適用於data-role =「page」外的元素

在我的jQM應用程序中，我有一個標題導航欄，我想要保留它。因爲在JQM固定頭的問題，我決定有一個這樣的結構：jQuery Mobile風格不適用於data-role =「page」外的元素

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body style="overflow:hidden;"> 
<div data-role="navbar"> 
    <ul> 
     <li><a href="#page1" class="ui-btn-active">One</a></li> 
     <li><a href="#page2">Two</a></li> 
    </ul> 
</div> 
<div id="page1" data-role="page" style="top:80px"> 
    <div data-role="content"> 
     Page1 
     <input type="button" value="Click"/> 
    </div> 
</div> 

<div id="page2" data-role="page" style="top:80px"> 
    <div data-role="content"> 
     Page2 
     <input type="button" value="Click2"/> 
    </div> 
</div> 
</body> 
</html>

的目的是保持固定在頂部導航欄。當你點擊相應的選項卡時，它應該加載頁面。由於我已經爲data-role="page" div給出了padding-top，所以它會出現，就好像標頭保持固定在頂部一樣。但是，data-role="navbar"樣式未應用於標題中的導航欄，因此它不能按預期工作。

任何解決方案，使其工作？提前致謝。

演示在這裏 - http://jsfiddle.net/UPZrs/

來源

2011-11-23 user700284

您可以使用「導航欄」插件：$("div:jqmData(role='navbar')").navbar();

http://jsfiddle.net/UPZrs/1/你仍然需要做一些佈局固定

介意position:fixed不是很好的支持在所有一種移動瀏覽器

來源

2011-11-23 11:38:47 GerjanOnline

相關：https：//github.com/jquery/jquery-mobile/wiki/Position:fixed-and-Overflow:-testing –

有趣的問題。我喜歡導航停留但內容改變。這可能是jQM未來可以提供的。這裏是我使用@ GerjanOnline的方法的嘗試，但問題是jQM每次都會重新定位頁面，所以它看起來很生澀。這是一個嘗試性的解決方案，但正如你所看到的，jQM仍然只使用'犯罪的頁面標籤。我只是顯示的頁面背後的因素推下來：

http://jsfiddle.net/UPZrs/6/

也許這會給你如何與JQM的控制restyle他們的想法。

新增的功能要求：https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

來源

2011-11-23 18:03:10

我有此相同的問題。最後我只是抓住從我的導航欄的HTML（通過螢火蟲）後，jQuery Mobile的已經程式化，而我使用的代碼看起來是這樣的：

<div id="edge_menu"> 
    <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"> 
     <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-c"> 
      <div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"> 
       <div class="ui-btn-text"> 
        <a href="/m/default.html" class="ui-link-inherit">Home</a> 
       </div> 
       <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span> 
      </div> 
     </li> 
    </ul> 
</div>

如果您檢查jQuery Mobile的添加類實際上很容易改變課程來改變主題或舍入/陰影選項。

另一個解決方法，我發現工作是讓你的菜單在頁面加載的data-role="page"股利，讓jQuery Mobile風格的頁面，然後移動菜單股利出data-role="page"股利是孩子body標籤。

來源

2011-11-23 18:20:05 Jasper

jQuery Mobile風格不適用於data-role =「page」外的元素

回答

相關問題