2012-11-27 68 views
0

我發現了下面的jQuery,它適用於頁面加載頁面時沒有動態內容的頁面,當你點擊從標籤頁到標籤頁。網格中的一個選項卡部分(默認值)會使用下面的jQuery正確調整相等的高度,但是當用戶點擊其他選項卡之一以將其他內容加載到網格中時(網格中的內容更多),相同高度的jQuery不會進行調整,這會導致網格中的內容在頁腳之外或網格之外和之下的其他內容之外進行解釋。jQuery Equal Heights和動態內容

有人可以幫助我提供的jQuery,以便它會動態調整相等的高度嗎?

謝謝!

$(document).ready(function() { 
    $('.content').each(function() { 
     var highestBox = 0; 
     $('.equalcontentcolumn', this).each(function() { 
      if ($(this).height() > highestBox) 
       highestBox = $(this).height(); 
     }); 

     $('.equalcontentcolumn', this).height(highestBox); 
    }); 
}); 

回答

0

如果您將$('.content).each塊封裝在某個函數中,則可以調用該函數以在需要時重新應用高度均衡,例如單擊某個選項卡時(例如,

$(document).ready(function() { 

    function equaliseIt() { 
     $('.content').each(function() { 
      var highestBox = 0; 
      $('.equalcontentcolumn', this).each(function() { 
       if ($(this).height() > highestBox) 
        highestBox = $(this).height(); 
      }); 

      $('.equalcontentcolumn', this).height(highestBox); 
     }); 
    } 

    //call the function at page load 
    equaliseIt(); 
}); 

你如何改變標籤?你正在使用插件還是手動執行?

如果使用插件,你可能訪問tabchange事件或類似的,這將標籤之後被解僱改變,所以你可以用它來調用equaliseIt()功能

如果你改變只需在更改標籤後調用該功能

+0

感謝您的回答danwellman。這些選項卡正在被手動更改,所以在更改選項卡後提及調用該功能可能會起作用。我執行此操作後,我會回覆評論。順便說一句,標籤是使用RadTabStrip(Telerik控件)製作的,並通過ajax回發來更改RadGrid內的內容。 – Pegues

+0

啊,好的,我自己並沒有使用這個特定的控制,但我知道Telerik :) – danwellman

0

您應該將此代碼/函數添加到change-tab事件中。因爲這個代碼只會在加載時運行。