jQuery Mobile样式未应用于data role="；之外的元素；第页“；_Jquery_Jquery Mobile

jQuery Mobile样式未应用于data role="；之外的元素；第页“；

jquery jquery-mobile

jQuery Mobile样式未应用于data role="；之外的元素；第页“；,jquery,jquery-mobile,Jquery,Jquery Mobile,在我的jQM应用程序中，我有一个标题导航栏，我想保持固定。由于jQM中固定头的问题，我决定采用如下结构： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mob

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

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






第1页
第2页

其目的是将导航栏固定在顶部。当您单击相应的选项卡时，它将加载页面。由于我为

data role=“page”

div提供了一个

padding top

，因此它看起来就像页眉固定在顶部一样。但它并没有按照预期工作，因为

data role=“navbar”

样式没有应用到标题中的navbar

有什么解决办法吗？。提前谢谢

此处演示-

您可以使用“navbar”插件：

$（“div:jqmData（role='navbar'））”）.navbar（）
你仍然需要做一些布局修正
请注意，position:fixed
并非在所有类型的移动浏览器中都得到很好的支持，这是一个有趣的问题。我喜欢导航保持不变，但内容有所变化。这可能是jQM将来可以提供的。下面是我尝试使用@gerjannonline的方法，但问题是jQM每次都在重新定位页面，所以看起来有点不稳定。这里是一个尝试过的解决方案，但正如您所看到的，jQM仍然只使用页面标记中的内容。我只是通过向下推来显示页面后面的元素：



也许这会让您了解如何使用jQM的控件重新设置它们的样式
添加了功能请求：
我遇到了完全相同的问题。在jQuery Mobile对HTML进行了样式化（通过FireBug）之后，我最终从导航栏中获取了HTML，我使用的代码如下所示：
<!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>

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







如果您检查jquerymobile添加的类，实际上很容易更改这些类以更改主题或舍入/阴影选项
我发现的另一个解决方法是在页面加载时将菜单放在data role=“page”
div中，让jQuery Mobile设置页面样式，然后将菜单div移出data role=“page”
div，使其成为body
标记的子项。
相关：