正確的頁面事件使用Jquery Mobile修改CSS

我想在頁面準備就緒時動態更改我的div高度。（的document.ready）。那麼我應該使用什麼正確的Jquery Mobile頁面事件？正確的頁面事件使用Jquery Mobile修改CSS

嘗試使用pagebeforeshow和pageshow事件。

Pagebeforeshow事件

$(document).on 'pagebeforeshow', -> 
    page_id = $.mobile.activePage[0].id 

    if page_id == "brands" 
    maxHeight = Math.max.apply(null, $(".product_descriptions").map(-> 
     $(this).height() 
    ).get()) 

    $(".product-image").css("height", maxHeight) 
    $(".circle-container").css("height", maxHeight)

maxHeight返回0

Pageshow事件

$(document).on 'pageshow', -> 
    page_id = $.mobile.activePage[0].id 

    if page_id == "brands" 
    maxHeight = Math.max.apply(null, $(".product_descriptions").map(-> 
     $(this).height() 
    ).get()) 

    $(".product-image").css("height", maxHeight) 
    $(".circle-container").css("height", maxHeight)

maxHeight將返回正確的值。

雖然pageshow事件返回正確的值，所有元素將顯示第一則只的.css功能解僱。我可以看到.css事件被觸發，在移動設備上看起來很奇怪（屏幕彈跳）。

有沒有解決方法？

來源

2014-03-19 skycrew

'pagebeforeshow'應該給你正確的高度，因爲頁面是完全建立。也許你應該在選擇器中更具體地指出$（「＃brands .product_descriptions」） – Omar

在「pageshow」和「pagehide」事件更改樣式看起來奇怪，是的，所以你被卡住「pagebeforeshow」事件。首先，如果您使用1.7.1之前的JQuery並嘗試獲取非隱藏元素的維度，那麼您應該嘗試使用較新的JQuery。如果沒有幫助，或者您嘗試獲得隱藏元素的尺寸，你可以嘗試一些奇怪的黑客像這樣的：

// object is JQuery object (e.g. $('#myId')) 
function getRealHeight(object) 
{ 
    var clone = object.clone().show().css({'visibility':'hidden'}).appendTo('body'); 
    var realHeight = clone.height(); 
    clone.remove(); 
    return realHeight; 
}

這個工作對我來說，即使對某些元素返回不準確的尺寸（例如，216而不是最終的232）。一些更多的版本這個黑客：jQuery - Get Width of Element when Not Visible (Display: None)

來源

2014-03-19 10:19:19 Regent

正確的頁面事件使用Jquery Mobile修改CSS

回答

相關問題