如何在 jQueryMobile 中跨页面保持相同的页眉/页脚？

Posted 2023-03-21

【中文标题】如何在 jQueryMobile 中跨页面保持相同的页眉/页脚？

【英文标题】：How to keep same header/footer across pages in jQueryMobile?

【发布时间】：2013-05-18 17:35:51

【问题描述】：

在浏览 jQueryMobile 页面时，是否有一种简单的方法可以保持相同的页眉/页脚？到目前为止，我遇到的唯一解决方案是在页面更改时动态注入它，但这会破坏过渡，并且只是克隆元素，我需要原始元素。

那么有官方支持的方式吗？我觉得奇怪的是我似乎是唯一一个在这个问题上苦苦挣扎的人？

【问题讨论】：

您的意思是在没有动画的情况下在过渡期间修复它们？或者所有页面都有相同的页眉/页脚？

@Omar 所有页面都使用相同的页眉/页脚。我希望它们具有动画效果，但如果只有页面本身具有动画效果，这不是什么大问题。

【参考方案1】：

不存在针对您的问题的内置解决方案。 jQuery Mobile 没有在加载的页面之间共享页眉和页脚的解决方案。

您唯一能做的就是动态注入它们或从一开始就拥有它们。在您的情况下，您在错误的时间这样做。如果要正确添加页眉和页脚，则需要在正确的页面事件期间进行。

一个工作示例：http://jsfiddle.net/Gajotres/xwrqn/

滑动以更改页面，看看它是如何工作的（我不想费心在每个页面上添加按钮）。

$(document).on('pagebeforecreate', '#article2, #article3', function() 
    $('<div>').attr('data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer').append('<h3>Article</h3>').appendTo($(this));
    $('<div>').attr('data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer').append('<h3>Article footer</h3>').appendTo($(this));    
);

如果您在 pagebeforecreate 期间执行此操作，这将仅在第一次创建页面时触发一次。将添加动态内容，因为 pagebeforecreate 在增强内容标记之前触发，您无需担心页眉和页脚样式。

请注意，每个页眉和页脚都添加了一个属性 'data-id':'footer'，因为它在页面转换期间只有内容会动画，页眉和页脚看起来相同。此外，jsFiddle 有一个错误，当您滑动页面时，它们会跳转 1-2px。这在现实生活中不会发生。

【讨论】：

这似乎正是我想避免的那种解决方案。例如，如果我在页脚中放置一个下拉框，并且用户在那里进行选择，那么他的选择将会丢失在下一页插入克隆的页脚。

你说得对，但这里不存在好的解决方案。您将需要在转换之间存储此类数据并在新页面中再次显示它们。无论您怎么想，这并不是一个复杂的解决方案。相信我，您将失去更多时间来寻找您想要的解决方案，然后您将需要这样做。目前在 jQuery Mobile 1.3.1 中，页面小部件不能在页面之外使用。在 jQuery Mobile 1.4 中它是可能的，但你需要等待它出来。如果他们能按预期工作，这是值得怀疑的。

现在我停止使用页面系统，只使用一个页面，通过隐藏/显示 DIV 来模拟其他页面。我不得不重新发明***真的很疯狂，只是因为正常的分页系统不支持这一点。无论如何，感谢您的帮助！

@Gajotres 你统治！在有关如何执行此操作的 100 个答案中，您的答案是唯一对我有用的答案！非常感谢！

这太疯狂了。我有一个非常大的标题。我需要通过js附加它吗？我会更好地搜索 jquery 移动替代方案...

【参考方案2】：

最简单的方法是在所有页面的页眉和页脚中添加“data-id”属性。要使页眉/页脚“持久化”，请在所有页面中使用相同的 data-id。

<div id="page1">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

<div id="page2">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

您还想使用 css 或 data-position="fixed" 来修复页眉和页脚。

希望这会有所帮助。

【讨论】：

哇，这对我有用！与其他解决方案相比非常简单。

仅供参考，这适用于页脚，但不适用于页眉。我在 jQM 1.4 中对此进行了测试

@Mahendra 你能告诉我，你是如何实现的吗？如何将页脚绑定到<div data-role="footer"></div>？你有单独的footer.html吗？

@adiga 不，我没有将其分开，但在 page 中使用了相同的页脚代码

这似乎只有在所有页面都在同一个文件中时才有效？ （至少到目前为止对我来说）？？

【参考方案3】：

这是我解决类似问题的方法：

        $(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) 
            $("#header").prependTo(ui.toPage);
            $("#control-panel").appendTo(ui.toPage);
        );

在浏览 jQueryMobile 页面时保持相同的页眉/页脚。在页面更改时动态注入，搞砸过渡，但不克隆元素，提供原始元素。

【讨论】：

这将在每次转换到页面之前添加页眉/页脚

它没有添加。它移动。是的，在每次过渡之前。这是解决大多数 OP 标准的简单方法。