Question

嗨我有一个单独的页脚页面作为footer.html＆amp;我想在所有其他html文件中使用它，但它只在index.html（我的应用程序的主要文件或起始页面在phonegap项目中）显示，而在其他页面中它不显示。我的footer.html如下：

    <!DOCTYPE html>
   <html>
   <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>


  </head> 

    <body>

<div data-role="navbar" data-iconpos="top">
    <ul>
        <li><a class="ui-btn-active" href="#page1" data-theme="a"
        data-icon="home"> Home </a></li>
        <li><a href="#page3" data-theme="a" data-icon="plus"> Feeds </a>
        </li>
        <li><a href="#page7" data-theme="a" data-icon="grid"> Gadgets
        </a></li>
        <li><a href="#page9" data-theme="a" data-icon="info"> Profile
        </a></li>
        <li><a href="#page14" data-theme="a" data-icon="gear">
        Settings </a></li>
    </ul>
</div>
   </body>
    </html>

我的index.html如下：

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


<script type="text/javascript">
    $('[data-role=page]').live('pageshow', function (event, ui)
    {
        $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function()
        {
                $("#" + event.target.id).find("[data-role=navbar]").navbar();
        });
    });
 </script>

 </head> 
 <body> 
  <div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">


    <div class="content-secondary"> 


        <ul data-role="listview" data-inset="true" data-theme="c"      data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="second.html" >First</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Accessibility</a></li>
            <li><a href="#">Supported platforms</a></li>
        </ul>

    </div><!--/content-primary-->   

</div>

<div data-role="footer" data-theme="d" data-position="fixed">
</div>  

 </div>
 </body>
 </html>

而second.html就是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to     package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


<script type="text/javascript">
    $('[data-role=page]').live('pageshow', function (event, ui)
    {
        $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function()
        {
                $("#" + event.target.id).find("[data-role=navbar]").navbar();
        });
    });
 </script>

</head> 
 <body> 
 <div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">


    <div class="content-secondary"> 


        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">2nd page</li>
            <li><a href="index.html" >Second</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Accessibility</a></li>
            <li><a href="#">Supported platforms</a></li>
        </ul>

    </div><!--/content-primary-->   

</div>

<div data-role="footer" data-theme="d" data-position="fixed">
</div>  

 </div>
 </body>
 </html>

此处在second.html页脚中未显示。当我点击第一个列表控件时，还有一个查询转到second.html文件但有时它不会出现，有时只会出现黑屏。为什么会这样？

提前致谢。任何帮助将不胜感激。

Answer 1

默认情况下，jQuery Mobile使用ajax加载页面。因此，在您引用second.html的情况下，它将通过ajax加载page div并注入当前DOM，以便在该html页面上定义的任何javascript都不会执行。

在index.html中尝试此操作

<li><a href="second.html" rel="external">First</a></li>

或

<li><a href="second.html" data-ajax="false">First</a></li>

这样会重新加载整个second.html页面

Answer 2

在second.html文件代码中会出现一些HTML验证问题，这就是为什么它没有显示页脚

常见页脚不会显示在second.html中

2 个答案: