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-color覆蓋background-image。

這裏是一個演示：http://jsfiddle.net/WSzq3/（當你的網頁之間點擊每個pagebeforeshow事件的背景顏色變化）