jQuery Mobile 样式未应用于 data-role="page" 之外的元素答案

【问题标题】：jQuery Mobile styles are not getting applied in elements outside data-role="page"jQuery Mobile 样式未应用于 data-role="page" 之外的元素
【发布时间】：2011-11-24 03:20:02
【问题描述】：

在我的 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>

目的是将导航栏固定在顶部。当您单击相应的选项卡时，它应该加载页面。由于我为data-role="page" div 提供了padding-top，因此它看起来好像标题固定在顶部。但它没有按预期工作，因为data-role="navbar" 样式没有应用于标题中的导航栏。

任何解决方案使它工作？提前致谢。

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

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

我遇到了同样的问题。在 jQuery Mobile 对 HTML 进行样式化后（通过 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 移出data-role="page" div body 标签的子标签。

【讨论】：

【解决方案2】：

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

http://jsfiddle.net/UPZrs/1/你还需要做一些布局修复

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

【讨论】：

相关：github.com/jquery/jquery-mobile/wiki/…

【解决方案3】：

有趣的问题。我喜欢导航保持不变，但内容会发生变化。这可能是 jQM 将来可以提供的东西。这是我使用@GerjanOnline 的方法的尝试，但问题是jQM 每次都重新定位页面，所以它看起来有点生涩。这是一个尝试的解决方案，但正如您所看到的，jQM 仍然只使用页面标签中的内容。我只是通过按下它们来显示页面背后的元素：

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

也许这会让您了解如何使用 jQM 的控件重新设置它们的样式。

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

【讨论】：