jQuery mobile - 动态更改ui页面背景颜色

Question

我有一个多页模板设置.我的主屏幕背景颜色与其他页面不同,但我发现我在页面中添加的一些内容不够长,无法到达页脚,我看到了默认的背景颜色设置主屏幕背景和页脚之间.

有没有办法在切换到页面之前更改页面的ui页面背景颜色,这样可以正确填补空白？

我考虑过委托代表为页面做的事情:

$(document).delegate("#pageDetail", "pagecreate", function () {
        $('.ui-page').css('background-color', '#ECF2FE');
    });

但是当你按下后退按钮时它就会中断,因为它会让变化保持原位.

是否有一个事件我可以使用这个更改将触发,以便我可以为每个页面设置正确的背景颜色 - 或者是否有一个更简单的方法我缺少？

谢谢

Answer 1

当pagecreate事件触发时,伪页面尚未被赋予.ui-page类,因此按该类选择对您没有帮助.我建议this用来选择当前的伪页面:

$(document).delegate("#pageDetail", "pagecreate", function () {
    $(this).css('background', '#ECF2FE');//`this` refers to `#pageDetail`
});

另请注意我更新了background属性而不是background-color.这是因为jQuery Mobile使用它们的下指定渐变背景background-image属性,你不能覆盖background-image用background-color.

这是一个演示:http://jsfiddle.net/WSzq3/(当您在页面之间单击时,每个pagebeforeshow事件的背景颜色会发生变化)