Question

在我的jQM应用程序中，我有一个标题导航栏，我想要修复它。由于jQM中固定标题的问题，我决定采用这样的结构：

<!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>

目的是将导航栏固定在顶部。当您单击相应的选项卡时，它应该加载页面。由于我为padding-top div提供了data-role="page"，因此它会显示为标题保持固定在顶部。但是在data-role="navbar"样式未应用于标题中的导航栏的意义上，它无法正常工作。

任何使其有效的解决方案？提前谢谢。

在这里演示 - http://jsfiddle.net/UPZrs/

Answer 1

我有同样的问题。我最终只是在jQuery Mobile对其进行样式化后（通过FireBug）从我的导航栏中抓取HTML，并且我使用了看起来像这样的代码：

<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" div中，让jQuery Mobile为页面设置样式，然后将菜单div移出{{1} } div是data-role="page"标记的子项。

Answer 2

您可以使用“navbar”插件：$("div:jqmData(role='navbar')").navbar();

http://jsfiddle.net/UPZrs/1/您仍需要进行一些布局修复

请注意，position:fixed并非在所有类型的移动浏览器中得到很好的支持

Answer 3

有趣的问题。我喜欢导航停留但内容发生了变化。这可能是jQM未来可能提供的。这是我尝试使用@ GerjanOnline的方法，但问题是jQM每次都重新定位页面，所以它有点看起来生涩。这是一个尝试的解决方案但是你可以看到jQM仍然只使用'页面标记'。我只是通过推下来展示页面背后的元素：

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

也许这会让你知道如何用jQM的控件重新设置它们。

添加了功能请求：https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

jQuery Mobile样式未应用于data-role =“page”之外的元素

3 个答案: