Question

我正在尝试使用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代码未正确包含或未初始化。我不确定我是否错过了装置中显而易见的东西，我只需要第二眼就可以了。

如果相关，页面的其余部分可能类似于：

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

但是，这不会导致工具栏出现。

Answer 1

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

修改
只是为了澄清，结构应该是这样的：

<!DOCTYPE ...> <html> <head> <title>Page title</title> </head> <body>  </body> </html>

没有HTML标签应该在body标签之外（head，body和amp; Doctype除外）。

您可以在页面结构here上找到更多信息。

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

为什么不出现JQuery Mobile工具栏

1 个答案: