0

ここに示すような単純なjqueryモバイルnavbarを実行しようとしています:

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

私が抱えている問題は、html ファイルにリンクすると、スタイリングや「jquery モバイル性」なしでロードされることです。これが私のスニペットです

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 の仕組みを誤解しているのかもしれませんが、デモを見ると、私がやっていることが可能なように見えます。代わりに、私はちょうどこのようなものを得ています

スタイルのない

私がこれを期待しているとき：

スタイル付き

すべてを 1 ページにまとめることもできますが、そうならないことを本当に望んでいます。また、すべてのページでヘッダーを繰り返さないことも望んでいます。これはまともな解決策のように思えましたが、ツールを適切に使用していないように感じます. グーグルを試してみて、他の試験を見つけましたが、なぜ私の試験が機能しないのかわかりません。

4

1 に答える 1