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事件的背景颜色会发生变化）