0

JQuery Mobile を使用してサイトのモバイル バージョンを作成しようとしています。固定のヘッダー ツールバーと固定のフッター ツールバーをすべてのページに表示したいと考えています。ただし、ページのこれらの部分は、代わりに単純な HTML リストとして書き出されています。関連するヘッダー コードは次のとおりです。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">

            <title>Nightscape Creations Wallpapers</title>
            <link rel="stylesheet" href="themes/NCMobile.min.css" />
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        </head>

        <div data-role="header" data-position="fixed">
            <a href="#" data-role="button" data-rel="back">Back</a>
            <h1>Nightscape Creations</h1>
            <a href="#home" data-icon="home" data-theme="a">Home</a>

            <div data-role="navbar">
                <ul>
                    <li><a href="#liveWallpapers">Live Wallpapers</a></li>
                    <li><a href="#staticWallpapers">Static Wallpapers</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </div>
        </div>

このコードは、モバイル サイトの www.NightscapeCreations.com で見ることができます。

JQuery コードが正しく含まれていないか、初期化されていないようです。インストールの中で、2 番目の監視が必要な明らかな何かを見逃したのではないかどうかはわかりません。

関連がある場合、ページの残りの部分は次のようになります。

    <body>  
        <div data-role="page" id="home">
            Some text
        </div>

        <div data-role="page" id="liveWallpapers">
            Some text
        </div>

        <div data-role="page" id="products">
            Some text
        </div>

        <div data-role="page" id="about">
            Some text
        </div>

        <div data-role="page" id="staticWallpapers">
            Some text
        </div>
    </body>

    <div data-role="footer" data-position="fixed">
        <h1>All images, animations, and content © Nightscape Creations</h1>
        <a href="setSessionVar.cfm?varName=browserType&varValue=desktop&goto=home.cfm">Visit Desktop Site</a>
    </div>
</html>




編集1

mwfire の提案に従って、表示されているすべてのコードを body タグ内に移動しました。このページの簡略化されたバージョンは、次のコードで利用できるようになりました:

<!DOCTYPE html>
<html>
    <head>
        <title>Nightscape Creations Wallpapers</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="themes/NCMobile.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    </head>




    <body>

        <div data-role="header" data-position="fixed">
            <a href="#" data-role="button" data-rel="back">Back</a>
            <h1>Nightscape Creations</h1>
            <a href="#home" data-icon="home" data-theme="a">Home</a>

            <div data-role="navbar">
                <ul>
                    <li><a href="#liveWallpapers">Live Wallpapers</a></li>
                    <li><a href="#staticWallpapers">Static Wallpapers</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </div>
        </div>



<div data-role="page" id="home1">


<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile.  Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included.  Use the header button above to browse the mobile site, or
<a href="setSessionVar.cfm?varName=browserType&varValue=desktop&goto=home.cfm">click here</a> to visit the main site instead.



</div>



        <div data-role="footer" data-position="fixed">
            <h1>All images, animations, and content © Nightscape Creations</h1>
            <a href="setSessionVar.cfm?varName=browserType&varValue=desktop&goto=home.cfm">Visit Desktop Site</a> 
        </div>
    </body>
</html>

ただし、これによってツールバーが表示されることはありません。

4

1 に答える 1

2

実際、すべての HTML コードはbodyタグ内に属しています。フッターも表示されないに違いない ;)

編集
明確にするために、構造は次のようになっているはずです：

<!DOCTYPE ...>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
       <!-- All visible HTML content goes here! -->
  </body>
</html>

body タグの外側に HTML タグを配置しないでください (head、body、Doctype を除く)。

ページ構造の詳細については、こちらを参照してください。


Edit2
これに加えて、ヘッダーとフッターは data-role="page" div 内にあるはずです。jQuery は一度に 1 つのページを表示します。これを 1 つの HTML ページと考えてください。次のように、単一ページの完全な構造を含める必要があります (もちろん、ヘッダーとフッターが必要な場合)。

<div data-role="page">
    <div data-role="header">
       <h1>Test</h1>
    </div>
    <div data-role="content">
        Content
    </div>
    <div data-role="footer">
         <h3>Footer</h3>
    </div>
</div>
于 2013-09-27T15:09:48.160 に答える