0

I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:

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

This code is visible at www.NightscapeCreations.com on the mobile site.

It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.

If it's relevant, the remainder of the page might be similar to:

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




EDIT 1

Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:

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

However, this does not cause the toolbars to appear.

4

1 回答 1

2

实际上，您所有的 HTML 代码都属于body标记。我打赌你也看不到任何页脚；）

编辑
只是为了澄清，结构应该是这样的：

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

正文标签之外不应有任何 HTML 标签（head、body 和 Doctype 除外）。

您可以在此处找到有关页面结构的更多信息。


Edit2
除此之外，页眉和页脚应该在 data-role="page" div 内。jQuery 一次显示一个页面，可以将其视为一个 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 回答