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

jQuery mobile - change ui-page background color dynamically

本文关键字：背景 颜色 ui mobile- 动态 jQuery      更新时间：2023-09-26

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

有没有一种方法可以在切换到页面之前更改页面的ui页面背景颜色，从而正确地填补空白？

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

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

但当你按下后退按钮时，它就会断开，因为它会把零钱留在原位。

有没有一个事件可以用来进行更改，它会触发，这样我就可以为每个页面设置正确的背景色——或者我缺少一个更简单的方法？

感谢

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

相关文章：