Jquery Mobile 中的简单导航栏不起作用答案

【问题标题】：Simple Navbar in Jquery Mobile not workingJquery Mobile 中的简单导航栏不起作用
【发布时间】：2014-02-11 05:43:04
【问题描述】：

我正在尝试做一个简单的 jquery 移动导航栏，如下所示：

http://demos.jquerymobile.com/1.4.0/tabs/#&ui-state=dialog

我遇到的问题是，当我链接到一个 html 文件时，它加载时没有任何样式或“jquery 移动性”。这是我的sn-ps

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="Content/jquery.mobile-1.4.0.min.css" />
</head>
<body>
    <div id="homePage" data-role="page">
        <div data-role="header" data-position="fixed" >
            <h1>Header</h1>
        </div>
        <div data-role="tabs" id="tabs">
            <div data-role="navbar" >
                <ul>
                    <li><a href="maps.html" data-ajax="false">Map</a></li>
                    <li><a href="#events">Events</a></li>
                </ul>
            </div>
            <div data-role="content">
                <div id="events">
                    <ul data-role="listview" data-inset="true" data-divider-theme="b">
                        <li data-role="list-divider">1</li>
                        <li><a href="#">a</a></li>
                        <li><a href="#">b</a></li>
                        <li data-role="staclist-divider">2</li>
                        <li><a href="#">c</a></li>
                        <li><a href="#">d</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <script src="Scripts/jquery-2.1.0.min.js"></script>
    <script src="Scripts/jquery.mobile-1.4.0.min.js"></script>
</body>
</html>

maps.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-divider-theme="a">
                <li data-role="list-divider">1</li>
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li data-role="list-divider">2</li>
                <li><a href="#">c</a></li>
                <li><a href="#">d</a></li>
            </ul>
        </div>

    </body>
    </html>

#events id 加载得很好。我期待加载 maps.html 的内容（与#events div 相同）。也许我误解了 jquery mobile 的工作原理，但演示使它看起来像我正在做的事情是可能的。相反，我只是得到这样的东西

当我期待这个时：

我知道我可以把它全部放在一个页面上，但我真的不希望这样做。我也希望不要在每一页上重复标题。这似乎是一个不错的解决方案，但我觉得我可能没有正确使用这些工具。我试过谷歌搜索并找到其他示例，但我不确定为什么我的不起作用。

【问题讨论】：

为什么地图页面的data-ajax 标志设置为false？
我都试过了。没有区别。我从jquery移动站点复制的例子有，所以放上来。
maps.html 缺少页面、标题和导航栏 div。尝试添加这些。
不幸的是，这不起作用。添加这些只会让一切都消失。

标签： jquery-mobile jquery-mobile-navbar

【解决方案1】：

我认为您的 maps.html 应该如下所示：

<div class="tablist-content" data-role="content">
    <ul data-role="listview" data-inset="true" data-divider-theme="a">
        <li data-role="list-divider">1</li>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li data-role="list-divider">2</li>
        <li><a href="#">c</a></li>
        <li><a href="#">d</a></li>
    </ul>
</div>

无需放置标准的 HTML 标头。

【讨论】：