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

【问题标题】：jQuery mobile - change ui-page background color dynamicallyjQuery mobile - 动态更改 ui 页面背景颜色
【发布时间】：2012-08-23 02:34:40
【问题描述】：

我有一个多页模板设置。我的主屏幕背景颜色与其他页面不同，但我发现我添加到页面中的某些内容不够长，无法到达页脚，并且我看到为背景和页脚之间的主屏幕。

有没有办法在切换到页面之前更改页面的 ui-page 背景颜色，以便正确填补空白？

我考虑过让页面的代表来做：

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

但是当你点击后退按钮时它会中断，因为它会保留更改。

我是否可以使用一个事件来进行此更改，以便我可以为每个页面设置正确的背景颜色 - 或者我是否缺少更简单的方法？

谢谢

【问题讨论】：

【解决方案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-color 覆盖 background-image。

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

【讨论】：