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

Posted 2023-03-21

【中文标题】Jquery Mobile 在不同页面上的相同页脚

【英文标题】：Jquery Mobile Same Footer on Different Pages

【发布时间】：2012-06-09 23:52:52

【问题描述】：

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

搜索我发现使用

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

和javascript

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

但是这不起作用。我应该提一下，我是 javascript 初学者，我几乎不明白发生了什么。

非常感谢

【参考方案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();
            );
        );

这个gist 显示了整个代码。

【讨论】：

非常感谢您的完美作品！正是我一直在寻找的东西，再次感谢。 :)

这很好用，但知道如何让它与 ui-btn-active 一起工作吗？或者甚至有可能，因为如果我将类添加到按钮中，所有按钮都会在主页上显示为活动状态。

理想情况下，您应该应用主题来区分一个按钮与其他按钮jquerymobile.com/demos/1.1.0/docs/buttons/buttons-themes.html

更好的解决方案：***.com/questions/7974630/…

【参考方案2】：

jquery 1.9 及以上版本live is now deprecated 请使用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();
                );
            );

【参考方案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>

【讨论】：

我的代码现在看起来像这样：' '但不幸的是，它仍然无法正常工作。不太确定我做错了什么。谢谢