Question

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

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

我遇到的问题是，当我链接到一个html文件时，它加载时没有任何样式或“jquery mobileness”。这是我的片段

的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移动设备是如何工作的，但是演示使它看起来像我正在做的事情是可能的。相反，我只是得到这样的东西

unstyled

当我期待这个时：

styled

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

Answer 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标头。

Jquery Mobile中的简单Navbar无法正常工作

1 个答案: