jquery - Jquery Mobile在不同页面上的相同页脚

Question

我想在我的 jquery 移动应用程序的所有页面上都有相同的页眉和页脚，并使用不同的文件来控制它，例如 footer.html。使用 PHP 包含这很容易做到，但我不能，因为我打算将此应用程序与 phonegap 一起使用。

搜索我发现使用

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

和 javascript

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

但是，这是行不通的。我应该提到我是 javascript 初学者，我几乎不明白发生了什么。

非常感谢

Answer 1

尝试以下事件，它适用于我的代码：

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

这个要点显示了整个代码。

Answer 2

从 jquery 1.9 及更高版本开始，live 现在已被弃用，请使用该功能。在控制台中它会给出 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();
                });
            });

Answer 3

您需要将外部 html 代码加载到具有 data-role="footer" 的 div 中，因此您需要更改：

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

到

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

例如，您的页脚 html 可能有一个 h3

  <h3>This is your footer</h3>