2

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

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

我考虑过委托页面来做这件事：

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

但是当您按下后退按钮时，它会中断，因为它会留下更改。

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

谢谢

4

1 回答 1

6

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

于 2012-08-22T18:25:56.373 回答