jQuery mobile data-page ='content'仅限转换

Question

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

我现在面临的主要问题是内置的页面转换会改变整页,要求我copy/paste在每个页面中使用页脚代码.

显然,这不是这样做的方法.页脚的任何小变化都必须重复10次以上(10页以上).

我的问题如下:如何只加载页面的"内容"部分(使用幻灯片转换),这样我就不必在所有页面中都有代码？

Answer 1

该功能尚未在jQuery Mobile中提供.您可以touchOverflowEnabled在iOS 5设备上打开"真实"固定页脚和固定页眉选项,但不能打开任何其他设备.

为了实现真正的固定工具栏,浏览器需要支持position:fixed或overflow:auto.幸运的是,这种支持即将推向移动平台,因此我们可以通过Web标准实现这一目标.在jQuery Mobile中,我们添加了一个名为touchOverflowEnabled的全局功能,该功能利用iOS5等受支持平台上的overflow:auto CSS属性.启用后,框架将每个页面包装在一个容器中,并使用它自己的内部滚动.这允许我们将工具栏放置在滚动体外部,以便它们始终保持固定在适当位置.

资料来源: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窗格中没有硬编码的页脚)