0

嗨，我有一个单独的页脚页面作为 footer.html 并且我想在所有其他 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 文件，但有时它不去，有时只出现黑屏。为什么会这样？

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

4

2 回答 2

3

默认情况下，jQuery Mobile 使用 ajax 来加载页面。因此，在您的情况下，当您引用second.html它时，它将通过 ajax 加载pagediv 并注入当前 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页面

于 2012-06-29T10:03:27.907 回答
0

second.html 文件代码中会有一些 HTML 验证问题，这就是它不显示页脚的原因

于 2012-06-29T09:55:48.787 回答