5

jqueryモバイルアプリのすべてのページに同じヘッダーとフッターを設定し、footer.htmlなどの別のファイルを使用して制御したいと考えています。これはPHPインクルードを使用するのは簡単ですが、phonegapでこのアプリを使用することを計画しているため、使用できません。

使用して見つけた周りを検索 

  <div data-role="footer">
<div class="footerExt"></div>
  </div>

およびjavascript

$('.footerExt').load('footer.html')

ただし、これは機能していません。私はJavaScriptの初心者であり、何が起こっているのかほとんど理解していません。

どうもありがとう

4

3 に答える 3

8

次のイベントを試してみてください。私のコードで動作します:

$('[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();
            });
        });

この要点は、コード全体を示しています。

于 2012-06-06T05:43:30.443 に答える
1

jquery 1.9 以降では live は非推奨になりました on で関数を使用してください。コンソールでは TypeError: $(...).live is not a function が返されます

例 コードを変更する

$('[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();
            });
        });

と置換する

 $('[data-role=page]').on('pageshow', function (event, ui) {
                $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
                    $("#" + event.target.id).find("[data-role=navbar]").navbar();
                });
            });
于 2014-02-28T11:42:41.093 に答える
0

data-role="footer" を使用して外部 html コードを div にロードする必要があるため、以下を変更する必要があります。

<div class="footerExt"></div>

に

<div data-role="footer" class="footerExt"></div>

たとえば、フッター html に h3 を含めることができます

  <h3>This is your footer</h3>
于 2012-06-05T23:09:25.287 に答える