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

时间:2012-01-09 20:12:12

标签: jquery iphone jquery-mobile cordova transition

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

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

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

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

2 个答案:

答案 0 :(得分:5)

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

  

为了实现真正的固定工具栏,浏览器需要   支持位置:固定或溢出:自动。幸运的是,这种支持是   来到移动平台,以便我们可以通过Web标准实现这一目标。   在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窗格中没有硬编码的页脚)

答案 1 :(得分:-5)

如果您在Web应用程序中使用数据库,则只需将页脚html添加到数据库中,并在每个页面加载PHP。您必须首先将PHP硬编码到每个页面,但在此之后更改页脚只需快速编辑数据库。查找MySQL / PHP。