jQuery mobile data-page='content' ONLY 过渡

Posted 2023-05-09

【中文标题】jQuery mobile data-page=\'content\' ONLY 过渡

【英文标题】：jQuery mobile data-page='content' ONLY transitionjQuery mobile data-page='content' ONLY 过渡

【发布时间】：2012-02-06 08:22:52

【问题描述】：

我正在尝试使用 PhoneGap 和 jQuery Mobile 开发 iPhone 应用程序。这个应用程序有一个Fixed Footer。

我现在面临的主要问题是内置的页面转换改变了整个页面，需要我copy/paste每个页面的页脚代码。

显然，这不是这样做的方法。页脚中的任何微小变化都必须重复 10 次以上（对于 10 多页）。

我的问题如下：如何仅加载页面的“内容”部分（带有幻灯片过渡），这样我就不必在所有页面中添加页脚代码？

【参考方案1】：

该功能在 jQuery Mobile 中尚不可用。您可以在 ios 5 设备上为“真正的”固定页脚和固定页眉打开 touchOverflowEnabled 选项，但不能为任何其他设备打开。

为了实现真正的固定工具栏，浏览器需要 支持位置：固定或溢出：自动。幸运的是，这种支持是 来到移动平台，这样我们就可以通过网络标准来实现这一目标。 在 jQuery Mobile 中，我们添加了一个名为 touchOverflowEnabled，它利用了 overflow:auto CSS 属性 支持的平台，如 iOS5。启用后，框架会包装每个 容器中的页面具有自己的内部滚动。这让我们 将工具栏定位在滚动体之外，以便它们真正保持 始终固定到位。

来源：http://jquerymobile.com/demos/1.0/docs/toolbars/bars-fixed.html

您可以在程序化庄园中设置页脚，而不是对每个页面进行硬编码：

//bind an event handler to the `pagecreate` event for all `data-role="page"` elements
$(document).delegate('[data-role="page"]', 'pagecreate', function () 

    //append a footer to this page (`pagecreate` is only called once per page added to the DOM so you don't have to worry about appending multiple footers to a single page
    $(this).append('<div data-id="my-fixed-footer" data-position="fixed" data-role="footer">THE HTML FOR YOUR FOOTER GOES HERE</div>');
);

这是一个演示：http://jsfiddle.net/vNqaG/（请注意 HTML 窗格中没有硬编码的页脚）

【参考方案2】：

如果您在 Web 应用程序中使用数据库，您可以简单地将页脚 html 添加到数据库中，并在每个页面使用 php 加载它。首先，您必须将 PHP 硬编码到每个页面中，但之后更改页脚所需的只是快速编辑数据库。查找 mysql/PHP。

【讨论】：

在数据库中存储 HTML 不是一个好主意。数据库用于数据，而不是 HTML 视图。随着时间的推移，这可能会造成难以维护的混乱，因为您的不同关注点没有分开和划分。