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”外的元素

回答

相关问题