0

こんにちは、footer.html としてフッター用の別のページが 1 つあり、それを他のすべての 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 フッターは表示されません。そして、最初のリストコントロールをクリックすると、もう1つのクエリがsecond.htmlファイルに移動しますが、移動せず、黒い画面しか表示されないことがあります。なぜそうなのですか？

前もって感謝します。どんな助けでも大歓迎です。

4

2 に答える 2

3

デフォルトでは、jQuery Mobile は ajax を使用してページをロードします。したがって、あなたの場合、それを参照すると、ajax を介しsecond.htmlて div が読み込まpageれ、現在の 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 に答える